You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
192 lines
5.3 KiB
PHP
192 lines
5.3 KiB
PHP
<?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();
|
|
}
|
|
}
|