Commit realizado el 12:13:52 08-04-2024
This commit is contained in:
Pagina Web Monito
191
wp-content/plugins/web-stories/includes/Renderer/Story/Embed.php
Normal file
191
wp-content/plugins/web-stories/includes/Renderer/Story/Embed.php
Normal file
@@ -0,0 +1,191 @@
|
||||
<?php
|
||||
/**
|
||||
* Class Embed
|
||||
*
|
||||
* @link https://github.com/googleforcreators/web-stories-wp
|
||||
*
|
||||
* @copyright 2020 Google LLC
|
||||
* @license https://www.apache.org/licenses/LICENSE-2.0 Apache License 2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Copyright 2020 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* https://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
declare(strict_types = 1);
|
||||
|
||||
namespace Google\Web_Stories\Renderer\Story;
|
||||
|
||||
use Google\Web_Stories\AMP_Story_Player_Assets;
|
||||
use Google\Web_Stories\Assets;
|
||||
use Google\Web_Stories\Context;
|
||||
use Google\Web_Stories\Embed_Base;
|
||||
use Google\Web_Stories\Model\Story;
|
||||
|
||||
/**
|
||||
* Class Embed
|
||||
*/
|
||||
class Embed {
|
||||
/**
|
||||
* Current post.
|
||||
*
|
||||
* @var Story Post object.
|
||||
*/
|
||||
protected Story $story;
|
||||
|
||||
/**
|
||||
* Assets instance.
|
||||
*
|
||||
* @var Assets Assets instance.
|
||||
*/
|
||||
private Assets $assets;
|
||||
|
||||
/**
|
||||
* Context instance.
|
||||
*
|
||||
* @var Context Context instance.
|
||||
*/
|
||||
private Context $context;
|
||||
|
||||
/**
|
||||
* Embed constructor.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param Story $story Story instance.
|
||||
* @param Assets $assets Assets instance.
|
||||
* @param Context $context Context instance.
|
||||
*/
|
||||
public function __construct( Story $story, Assets $assets, Context $context ) {
|
||||
$this->assets = $assets;
|
||||
$this->story = $story;
|
||||
$this->context = $context;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the block output in default context.
|
||||
*
|
||||
* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param array<string,string|int> $args Array of Argument to render.
|
||||
* @return string Rendered block type output.
|
||||
*/
|
||||
public function render( array $args = [] ): string {
|
||||
$defaults = [
|
||||
'align' => 'none',
|
||||
'class' => 'wp-block-web-stories-embed',
|
||||
'height' => 600,
|
||||
'width' => 360,
|
||||
];
|
||||
|
||||
$args = wp_parse_args( $args, $defaults );
|
||||
$align = sprintf( 'align%s', $args['align'] );
|
||||
$class = $args['class'];
|
||||
$url = $this->story->get_url();
|
||||
$title = $this->story->get_title();
|
||||
$poster = $this->story->get_poster_portrait();
|
||||
$poster_srcset = $this->story->get_poster_srcset();
|
||||
$poster_sizes = $this->story->get_poster_sizes();
|
||||
|
||||
$wrapper_style = sprintf(
|
||||
'--aspect-ratio: %F; --width: %dpx; --height: %dpx',
|
||||
0 !== $args['height'] ? $args['width'] / $args['height'] : 1,
|
||||
(int) $args['width'],
|
||||
(int) $args['height']
|
||||
);
|
||||
|
||||
// This CSS is used for AMP and non-AMP.
|
||||
$this->assets->enqueue_style_asset( Embed_Base::SCRIPT_HANDLE );
|
||||
|
||||
if ( $this->context->is_amp() ) {
|
||||
ob_start();
|
||||
?>
|
||||
<div class="<?php echo esc_attr( "$class web-stories-embed web-stories-embed-amp $align" ); ?>">
|
||||
<div class="wp-block-embed__wrapper" style="<?php echo esc_attr( $wrapper_style ); ?>">
|
||||
<amp-story-player
|
||||
width="<?php echo esc_attr( $args['width'] ); ?>"
|
||||
height="<?php echo esc_attr( $args['height'] ); ?>"
|
||||
layout="intrinsic">
|
||||
<a href="<?php echo esc_url( $url ); ?>">
|
||||
<?php if ( $poster ) { ?>
|
||||
<img
|
||||
src="<?php echo esc_url( $poster ); ?>"
|
||||
width="<?php echo esc_attr( $args['width'] ); ?>"
|
||||
height="<?php echo esc_attr( $args['height'] ); ?>"
|
||||
alt="<?php echo esc_attr( $title ); ?>"
|
||||
<?php if ( ! empty( $poster_srcset ) ) { ?>
|
||||
srcset="<?php echo esc_attr( $poster_srcset ); ?>"
|
||||
<?php } ?>
|
||||
<?php if ( ! empty( $poster_sizes ) ) { ?>
|
||||
sizes="<?php echo esc_attr( $poster_sizes ); ?>"
|
||||
<?php } ?>
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
data-amp-story-player-poster-img
|
||||
/>
|
||||
<?php
|
||||
} else {
|
||||
echo esc_html( $title );
|
||||
}
|
||||
?>
|
||||
</a>
|
||||
</amp-story-player>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
|
||||
return (string) ob_get_clean();
|
||||
}
|
||||
$this->assets->enqueue_style( AMP_Story_Player_Assets::SCRIPT_HANDLE );
|
||||
$this->assets->enqueue_script( AMP_Story_Player_Assets::SCRIPT_HANDLE );
|
||||
|
||||
ob_start();
|
||||
?>
|
||||
<div class="<?php echo esc_attr( "$class web-stories-embed $align" ); ?>">
|
||||
<div class="wp-block-embed__wrapper" style="<?php echo esc_attr( $wrapper_style ); ?>">
|
||||
<amp-story-player>
|
||||
<a href="<?php echo esc_url( $url ); ?>">
|
||||
<?php if ( $poster ) { ?>
|
||||
<img
|
||||
src="<?php echo esc_url( $poster ); ?>"
|
||||
width="<?php echo esc_attr( $args['width'] ); ?>"
|
||||
height="<?php echo esc_attr( $args['height'] ); ?>"
|
||||
alt="<?php echo esc_attr( $title ); ?>"
|
||||
<?php if ( ! empty( $poster_srcset ) ) { ?>
|
||||
srcset="<?php echo esc_attr( $poster_srcset ); ?>"
|
||||
<?php } ?>
|
||||
<?php if ( ! empty( $poster_sizes ) ) { ?>
|
||||
sizes="<?php echo esc_attr( $poster_sizes ); ?>"
|
||||
<?php } ?>
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
data-amp-story-player-poster-img
|
||||
/>
|
||||
<?php
|
||||
} else {
|
||||
echo esc_html( $title );
|
||||
}
|
||||
?>
|
||||
</a>
|
||||
</amp-story-player>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
|
||||
return (string) ob_get_clean();
|
||||
}
|
||||
}
|
||||
269
wp-content/plugins/web-stories/includes/Renderer/Story/HTML.php
Normal file
269
wp-content/plugins/web-stories/includes/Renderer/Story/HTML.php
Normal file
@@ -0,0 +1,269 @@
|
||||
<?php
|
||||
/**
|
||||
* Class HTML
|
||||
*
|
||||
* @link https://github.com/googleforcreators/web-stories-wp
|
||||
*
|
||||
* @copyright 2020 Google LLC
|
||||
* @license https://www.apache.org/licenses/LICENSE-2.0 Apache License 2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Copyright 2020 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* https://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
declare(strict_types = 1);
|
||||
|
||||
namespace Google\Web_Stories\Renderer\Story;
|
||||
|
||||
use Google\Web_Stories\Model\Story;
|
||||
|
||||
/**
|
||||
* Class HTML
|
||||
*/
|
||||
class HTML {
|
||||
/**
|
||||
* Current post.
|
||||
*
|
||||
* @var Story Post object.
|
||||
*/
|
||||
protected Story $story;
|
||||
|
||||
/**
|
||||
* HTML constructor.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param Story $story Story object.
|
||||
*/
|
||||
public function __construct( Story $story ) {
|
||||
$this->story = $story;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the story.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @return string The complete HTML markup for the story.
|
||||
*/
|
||||
public function render(): string {
|
||||
$markup = $this->story->get_markup();
|
||||
$markup = $this->fix_incorrect_charset( $markup );
|
||||
$markup = $this->fix_malformed_script_link_tags( $markup );
|
||||
$markup = $this->replace_html_head( $markup );
|
||||
$markup = wp_replace_insecure_home_url( $markup );
|
||||
$markup = $this->print_analytics( $markup );
|
||||
$markup = $this->print_social_share( $markup );
|
||||
|
||||
return $markup;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix incorrect <meta charset> tags.
|
||||
*
|
||||
* React/JSX outputs the charset attribute name as "charSet",
|
||||
* but libdom and the AMP toolbox only recognize lowercase "charset"
|
||||
*
|
||||
* @since 1.28.0
|
||||
*
|
||||
* @param string $content Story markup.
|
||||
* @return string Filtered content
|
||||
*/
|
||||
public function fix_incorrect_charset( string $content ): string {
|
||||
return (string) preg_replace( '/<meta charSet="utf-8"\s?\/>/i', '<meta charset="utf-8"/>', $content );
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix malformed <a> tags in the <head>.
|
||||
*
|
||||
* On certain environments like WordPress.com VIP, there is additional KSES
|
||||
* hardening that prevents saving `<script>` tags to the database, despite
|
||||
* this plugin allowing them ({@see KSES}).
|
||||
*
|
||||
* There, script tags somehow get transformed to `<a>` tags before saving
|
||||
* to the database.
|
||||
* This of course breaks the markup completely as `<a>` is not allowed in the `<head>`,
|
||||
* thus the DOMDocument parser moves them to the `<body>`, breaking the DOM structure.
|
||||
*
|
||||
* Since we cannot prevent the broken `<a>`/`<script>` tags upon saving
|
||||
* and not during sanitization, this method is an attempt to fix them
|
||||
* *before* they're sanitized.
|
||||
*
|
||||
* Turns `<a href="https://cdn.ampproject.org/v0.js">https://cdn.ampproject.org/v0.js</a>`
|
||||
* into `<script async src="https://cdn.ampproject.org/v0.js"></script>`
|
||||
* and `<a href="https://cdn.ampproject.org/v0/amp-story-1.0.js">https://cdn.ampproject.org/v0/amp-story-1.0.js</a>`
|
||||
* into `<script async src="https://cdn.ampproject.org/v0/amp-story-1.0.js" custom-element="amp-story"></script>`.
|
||||
*
|
||||
* @since 1.13.0
|
||||
*
|
||||
* @param string $content Story markup.
|
||||
* @return string Filtered content
|
||||
*/
|
||||
protected function fix_malformed_script_link_tags( string $content ): string {
|
||||
$replaced_content = preg_replace_callback(
|
||||
'/<a[^>]+href="(?P<href>[^"]+)"[^>]*>\1<\/a>/m',
|
||||
static function ( $matches ) {
|
||||
if ( str_starts_with( $matches['href'], 'https://cdn.ampproject.org/' ) ) {
|
||||
$script_url = $matches['href'];
|
||||
|
||||
// Turns `<a href="https://cdn.ampproject.org/v0.js">https://cdn.ampproject.org/v0.js</a>`
|
||||
// into `<script async src="https://cdn.ampproject.org/v0.js"></script>`.
|
||||
if ( 'https://cdn.ampproject.org/v0.js' === $script_url ) {
|
||||
return "<script async src=\"$script_url\"></script>"; // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript
|
||||
}
|
||||
|
||||
// Extract 'amp-story' from 'https://cdn.ampproject.org/v0/amp-story-1.0.js'.
|
||||
$sub_matches = [];
|
||||
preg_match( '/v0\/(?P<custom_element>[\w-]+)-[\d.]+\.js/', $script_url, $sub_matches );
|
||||
$custom_element = $sub_matches['custom_element'];
|
||||
|
||||
// Turns `<a href="https://cdn.ampproject.org/v0/amp-story-1.0.js">https://cdn.ampproject.org/v0/amp-story-1.0.js</a>`
|
||||
// into <script async src="https://cdn.ampproject.org/v0/amp-story-1.0.js" custom-element="amp-story"></script>.
|
||||
return "<script async src=\"$script_url\" custom-element=\"$custom_element\"></script>"; // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript
|
||||
}
|
||||
|
||||
return $matches[0];
|
||||
},
|
||||
$content
|
||||
);
|
||||
|
||||
// On errors the return value of preg_replace_callback() is null.
|
||||
return $replaced_content ?: $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the full HTML <head> markup for a given story besides boilerplate.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @return string Filtered content.
|
||||
*/
|
||||
protected function get_html_head_markup(): string {
|
||||
ob_start();
|
||||
?>
|
||||
<meta name="amp-story-generator-name" content="Web Stories for WordPress" />
|
||||
<meta name="amp-story-generator-version" content="<?php echo esc_attr( WEBSTORIES_VERSION ); ?>" />
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Prints scripts or data in the head tag on the front end.
|
||||
*/
|
||||
do_action( 'web_stories_story_head' );
|
||||
|
||||
return (string) ob_get_clean();
|
||||
}
|
||||
|
||||
/**
|
||||
* Replaces markers in HTML <head> with dynamic content.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param string $content Story markup.
|
||||
* @return string Filtered content.
|
||||
*/
|
||||
protected function replace_html_head( string $content ): string {
|
||||
$start_tag = '<meta name="web-stories-replace-head-start"/>';
|
||||
$end_tag = '<meta name="web-stories-replace-head-end"/>';
|
||||
|
||||
// Replace malformed meta tags with correct tags.
|
||||
$content = (string) preg_replace( '/<meta name="web-stories-replace-head-start\s?"\s?\/?>/i', $start_tag, $content );
|
||||
$content = (string) preg_replace( '/<meta name="web-stories-replace-head-end\s?"\s?\/?>/i', $end_tag, $content );
|
||||
|
||||
$start_tag_pos = strpos( $content, $start_tag );
|
||||
$end_tag_pos = strpos( $content, $end_tag );
|
||||
|
||||
if ( false !== $start_tag_pos && false !== $end_tag_pos ) {
|
||||
$end_tag_pos += \strlen( $end_tag );
|
||||
$content = substr_replace( $content, $this->get_html_head_markup(), $start_tag_pos, $end_tag_pos - $start_tag_pos );
|
||||
}
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Print analytics code before closing `</amp-story>`.
|
||||
*
|
||||
* @since 1.2.0
|
||||
*
|
||||
* @param string $content String to replace.
|
||||
*/
|
||||
protected function print_analytics( string $content ): string {
|
||||
ob_start();
|
||||
|
||||
/**
|
||||
* Fires before the closing <amp-story> tag.
|
||||
*
|
||||
* Can be used to print <amp-analytics> configuration.
|
||||
*
|
||||
* @since 1.1.0
|
||||
*/
|
||||
do_action( 'web_stories_print_analytics' );
|
||||
|
||||
$output = (string) ob_get_clean();
|
||||
|
||||
return str_replace( '</amp-story>', $output . '</amp-story>', $content );
|
||||
}
|
||||
|
||||
/**
|
||||
* Print amp-story-social-share before closing `</amp-story>`.
|
||||
*
|
||||
* @since 1.6.0
|
||||
*
|
||||
* @param string $content String to replace.
|
||||
*/
|
||||
protected function print_social_share( string $content ): string {
|
||||
$share_providers = [
|
||||
[
|
||||
'provider' => 'twitter',
|
||||
],
|
||||
[
|
||||
'provider' => 'linkedin',
|
||||
],
|
||||
[
|
||||
'provider' => 'email',
|
||||
],
|
||||
[
|
||||
'provider' => 'system',
|
||||
],
|
||||
];
|
||||
|
||||
/**
|
||||
* Filters the list of sharing providers in the Web Stories sharing dialog.
|
||||
*
|
||||
* @since 1.3.0
|
||||
*
|
||||
* @link https://amp.dev/documentation/components/amp-social-share/?format=stories#pre-configured-providers
|
||||
*
|
||||
* @param array[] $share_providers List of sharing providers.
|
||||
*/
|
||||
$share_providers = apply_filters( 'web_stories_share_providers', $share_providers );
|
||||
|
||||
if ( empty( $share_providers ) ) {
|
||||
return $content;
|
||||
}
|
||||
|
||||
$config = [
|
||||
'shareProviders' => $share_providers,
|
||||
];
|
||||
$social_share = sprintf(
|
||||
'<amp-story-social-share layout="nodisplay"><script type="application/json">%s</script></amp-story-social-share>',
|
||||
wp_json_encode( $config )
|
||||
);
|
||||
|
||||
|
||||
return str_replace( '</amp-story>', $social_share . '</amp-story>', $content );
|
||||
}
|
||||
}
|
||||
111
wp-content/plugins/web-stories/includes/Renderer/Story/Image.php
Normal file
111
wp-content/plugins/web-stories/includes/Renderer/Story/Image.php
Normal file
@@ -0,0 +1,111 @@
|
||||
<?php
|
||||
/**
|
||||
* Class Image
|
||||
*
|
||||
* @link https://github.com/googleforcreators/web-stories-wp
|
||||
*
|
||||
* @copyright 2020 Google LLC
|
||||
* @license https://www.apache.org/licenses/LICENSE-2.0 Apache License 2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Copyright 2020 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* https://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
declare(strict_types = 1);
|
||||
|
||||
namespace Google\Web_Stories\Renderer\Story;
|
||||
|
||||
use Google\Web_Stories\Model\Story;
|
||||
|
||||
/**
|
||||
* Class Image
|
||||
*/
|
||||
class Image {
|
||||
/**
|
||||
* Current post.
|
||||
*
|
||||
* @var Story Post object.
|
||||
*/
|
||||
protected Story $story;
|
||||
|
||||
|
||||
/**
|
||||
* Image constructor.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param Story $story Story Object.
|
||||
*/
|
||||
public function __construct( Story $story ) {
|
||||
$this->story = $story;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the block as an image.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param array<string,string|int> $args Array of Argument to render.
|
||||
* @return string Rendered block type output.
|
||||
*/
|
||||
public function render( array $args = [] ): string {
|
||||
$defaults = [
|
||||
'align' => 'none',
|
||||
'class' => 'wp-block-web-stories-embed',
|
||||
'height' => 600,
|
||||
'width' => 360,
|
||||
];
|
||||
$args = wp_parse_args( $args, $defaults );
|
||||
$align = sprintf( 'align%s', $args['align'] );
|
||||
$class = $args['class'];
|
||||
|
||||
$url = $this->story->get_url();
|
||||
$title = $this->story->get_title();
|
||||
$poster = $this->story->get_poster_portrait();
|
||||
$poster_srcset = $this->story->get_poster_srcset();
|
||||
$poster_sizes = $this->story->get_poster_sizes();
|
||||
|
||||
ob_start();
|
||||
?>
|
||||
<div class="<?php echo esc_attr( $class ); ?> <?php echo esc_attr( $align ); ?>">
|
||||
<a href="<?php echo esc_url( $url ); ?>">
|
||||
<?php if ( ! empty( $poster ) ) { ?>
|
||||
<img
|
||||
src="<?php echo esc_url( $poster ); ?>"
|
||||
width="<?php echo esc_attr( $args['width'] ); ?>"
|
||||
height="<?php echo esc_attr( $args['height'] ); ?>"
|
||||
alt="<?php echo esc_attr( $title ); ?>"
|
||||
<?php if ( ! empty( $poster_srcset ) ) { ?>
|
||||
srcset="<?php echo esc_attr( $poster_srcset ); ?>"
|
||||
<?php } ?>
|
||||
<?php if ( ! empty( $poster_sizes ) ) { ?>
|
||||
sizes="<?php echo esc_attr( $poster_sizes ); ?>"
|
||||
<?php } ?>
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<?php
|
||||
} else {
|
||||
echo esc_html( $title );
|
||||
}
|
||||
?>
|
||||
</a>
|
||||
</div>
|
||||
<?php
|
||||
|
||||
return (string) ob_get_clean();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
<?php
|
||||
/**
|
||||
* Class Singleton
|
||||
*
|
||||
* @link https://github.com/googleforcreators/web-stories-wp
|
||||
*
|
||||
* @copyright 2020 Google LLC
|
||||
* @license https://www.apache.org/licenses/LICENSE-2.0 Apache License 2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Copyright 2023 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* https://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
declare(strict_types = 1);
|
||||
|
||||
namespace Google\Web_Stories\Renderer\Story;
|
||||
|
||||
use Google\Web_Stories\AMP_Story_Player_Assets;
|
||||
use Google\Web_Stories\Assets;
|
||||
use Google\Web_Stories\Embed_Base;
|
||||
use Google\Web_Stories\Model\Story;
|
||||
use Google\Web_Stories\Renderer\Stories\Renderer;
|
||||
|
||||
/**
|
||||
* Class Singleton
|
||||
*/
|
||||
class Singleton {
|
||||
/**
|
||||
* Number of instances invoked. Kept it static to keep track.
|
||||
*/
|
||||
protected static int $instances = 0;
|
||||
|
||||
/**
|
||||
* Current post.
|
||||
*
|
||||
* @var Story Post object.
|
||||
*/
|
||||
protected Story $story;
|
||||
|
||||
/**
|
||||
* Assets instance.
|
||||
*
|
||||
* @var Assets Assets instance.
|
||||
*/
|
||||
private Assets $assets;
|
||||
|
||||
/**
|
||||
* Object ID for the Renderer class.
|
||||
* To enable support for multiple carousels and lightboxes
|
||||
* on the same page, we needed to identify each Renderer instance.
|
||||
*
|
||||
* This variable is used to add appropriate class to the Web Stories
|
||||
* wrapper.
|
||||
*/
|
||||
protected int $instance_id = 0;
|
||||
|
||||
/**
|
||||
* Singleton constructor.
|
||||
*
|
||||
* @since 1.30.0
|
||||
*
|
||||
* @param Story $story Story instance.
|
||||
* @param Assets $assets Assets instance.
|
||||
*/
|
||||
public function __construct( Story $story, Assets $assets ) {
|
||||
$this->assets = $assets;
|
||||
$this->story = $story;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the block output in default context.
|
||||
*
|
||||
* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
|
||||
*
|
||||
* @since 1.30.0
|
||||
*
|
||||
* @param array<string,string|int> $args Array of Argument to render.
|
||||
* @return string Rendered block type output.
|
||||
*/
|
||||
public function render( array $args = [] ): string {
|
||||
++self::$instances;
|
||||
$this->instance_id = self::$instances;
|
||||
|
||||
$defaults = [
|
||||
'align' => 'none',
|
||||
'class' => 'wp-block-web-stories-embed',
|
||||
'height' => 600,
|
||||
'width' => 360,
|
||||
];
|
||||
|
||||
$args = wp_parse_args( $args, $defaults );
|
||||
|
||||
$args['align'] = ! empty( $args['align'] ) ? $args['align'] : 'none';
|
||||
$align = sprintf( 'align%s', $args['align'] );
|
||||
$class = $args['class'];
|
||||
$wrapper_style = sprintf(
|
||||
'--aspect-ratio: %F; --width: %dpx; --height: %dpx',
|
||||
0 !== $args['height'] ? $args['width'] / $args['height'] : 1,
|
||||
(int) $args['width'],
|
||||
(int) $args['height']
|
||||
);
|
||||
|
||||
$this->assets->enqueue_style( AMP_Story_Player_Assets::SCRIPT_HANDLE );
|
||||
$this->assets->enqueue_script( AMP_Story_Player_Assets::SCRIPT_HANDLE );
|
||||
$this->assets->enqueue_script_asset( Renderer::LIGHTBOX_SCRIPT_HANDLE );
|
||||
$this->assets->enqueue_style_asset( Embed_Base::SCRIPT_HANDLE );
|
||||
|
||||
ob_start();
|
||||
?>
|
||||
<div class="<?php echo esc_attr( "$class web-stories-singleton $align" ); ?>" data-id="<?php echo esc_attr( 'singleton-' . $this->instance_id ); ?>">
|
||||
<div class="wp-block-embed__wrapper" style="<?php echo esc_attr( $wrapper_style ); ?>">
|
||||
<?php $this->render_story_with_poster( $args ); ?>
|
||||
</div>
|
||||
<?php
|
||||
|
||||
$data = [
|
||||
'controls' => [
|
||||
[
|
||||
'name' => 'close',
|
||||
'position' => 'start',
|
||||
],
|
||||
[
|
||||
'name' => 'skip-next',
|
||||
],
|
||||
],
|
||||
'behavior' => [
|
||||
'autoplay' => false,
|
||||
],
|
||||
];
|
||||
|
||||
?>
|
||||
<div class="web-stories-singleton__lightbox-wrapper <?php echo esc_attr( 'ws-lightbox-singleton-' . $this->instance_id ); ?>">
|
||||
<div class="web-stories-singleton__lightbox">
|
||||
<amp-story-player width="3.6" height="6" layout="responsive">
|
||||
<script type="application/json">
|
||||
<?php echo wp_json_encode( $data ); ?>
|
||||
</script>
|
||||
<a href="<?php echo esc_url( $this->story->get_url() ); ?>"><?php echo esc_html( $this->story->get_title() ); ?></a>
|
||||
</amp-story-player>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
return (string) ob_get_clean();
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a story with story's poster image.
|
||||
*
|
||||
* @since 1.30.0
|
||||
*
|
||||
* @param array<string,string|int> $args Array of Argument to render.
|
||||
*/
|
||||
protected function render_story_with_poster( array $args ): void {
|
||||
$poster_url = $this->story->get_poster_portrait();
|
||||
$poster_srcset = $this->story->get_poster_srcset();
|
||||
$poster_sizes = $this->story->get_poster_sizes();
|
||||
|
||||
if ( ! $poster_url ) {
|
||||
?>
|
||||
<div class="web-stories-singleton-poster">
|
||||
<div class="web-stories-singleton-poster-placeholder">
|
||||
<a href="<?php echo esc_url( $this->story->get_url() ); ?>">
|
||||
<?php echo esc_html( $this->story->get_title() ); ?>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<div class="web-stories-singleton-poster">
|
||||
<a href="<?php echo esc_url( $this->story->get_url() ); ?>">
|
||||
<img
|
||||
src="<?php echo esc_url( $poster_url ); ?>"
|
||||
alt="<?php echo esc_attr( $this->story->get_title() ); ?>"
|
||||
width="<?php echo absint( $args['width'] ); ?>"
|
||||
height="<?php echo absint( $args['height'] ); ?>"
|
||||
<?php if ( ! empty( $poster_srcset ) ) { ?>
|
||||
srcset="<?php echo esc_attr( $poster_srcset ); ?>"
|
||||
<?php } ?>
|
||||
<?php if ( ! empty( $poster_sizes ) ) { ?>
|
||||
sizes="<?php echo esc_attr( $poster_sizes ); ?>"
|
||||
<?php } ?>
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
$this->render_content_overlay();
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the content overlay markup.
|
||||
*
|
||||
* @since 1.30.0
|
||||
*/
|
||||
protected function render_content_overlay(): void {
|
||||
?>
|
||||
<div class="web-stories-singleton-overlay">
|
||||
<div class="web-stories-singleton-overlay__title">
|
||||
<?php echo esc_html( $this->story->get_title() ); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user