Skip to content

Commit

Permalink
Merge branch 'main' into try/heic
Browse files Browse the repository at this point in the history
  • Loading branch information
swissspidy committed Feb 14, 2023
2 parents 03dfe80 + 736a8ad commit a88ab7b
Show file tree
Hide file tree
Showing 21 changed files with 1,258 additions and 65 deletions.
16 changes: 10 additions & 6 deletions blocks/embed/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,9 @@
"title": "Web Stories",
"description": "Embed Web Stories.",
"category": "embed",
"keywords": [
"embed",
"web stories",
"story",
"stories"
],
"keywords": ["embed", "web stories", "story", "stories"],
"textdomain": "web-stories",
"usesContext": ["postId", "postType", "queryId"],
"attributes": {
"blockType": {
"type": "string"
Expand Down Expand Up @@ -78,6 +74,14 @@
"fieldState": {
"type": "object",
"default": {}
},
"taxQuery": {
"type": "object",
"default": {}
},
"previewOnly": {
"type": "boolean",
"default": false
}
},
"supports": {
Expand Down
23 changes: 20 additions & 3 deletions includes/Block/Web_Stories_Block.php
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,12 @@
use Google\Web_Stories\Assets;
use Google\Web_Stories\Context;
use Google\Web_Stories\Embed_Base;
use Google\Web_Stories\Model\Story;
use Google\Web_Stories\Stories_Script_Data;
use Google\Web_Stories\Story_Post_Type;
use Google\Web_Stories\Story_Query;
use Google\Web_Stories\Tracking;
use WP_Block;

/**
* Latest Stories block class.
Expand All @@ -59,7 +61,8 @@
* order?: string,
* archiveLinkLabel?: string,
* authors?: int[],
* fieldState?: array<string, mixed>
* fieldState?: array<string, mixed>,
* previewOnly?: bool
* }
* @phpstan-type BlockAttributesWithDefaults array{
* blockType?: string,
Expand All @@ -79,7 +82,8 @@
* order?: string,
* archiveLinkLabel?: string,
* authors?: int[],
* fieldState?: array<string, mixed>
* fieldState?: array<string, mixed>,
* previewOnly?: bool
* }
*/
class Web_Stories_Block extends Embed_Base {
Expand Down Expand Up @@ -163,15 +167,28 @@ public function register(): void {
* @since 1.5.0
*
* @param array<string, mixed> $attributes Block attributes.
* @param string $content Block content.
* @param WP_Block $block Block instance.
* @return string Rendered block type output.
*
* @phpstan-param BlockAttributesWithDefaults $attributes
*/
public function render_block( array $attributes ): string {
public function render_block( array $attributes, string $content, WP_Block $block ): string {
if ( false === $this->initialize_block_attributes( $attributes ) ) {
return '';
}

if ( isset( $block->context['postType'], $block->context['postId'] ) && 'web-story' === $block->context['postType'] && ! empty( $block->context['postId'] ) ) {
$attributes = wp_parse_args( $attributes, $this->default_attrs() );

$attributes['class'] = 'wp-block-web-stories-embed';

$story = new Story();
$story->load_from_post( get_post( $block->context['postId'] ) );

return $this->render_story( $story, $attributes );
}

if ( ! empty( $attributes['blockType'] )
&& ( 'latest-stories' === $attributes['blockType'] || 'selected-stories' === $attributes['blockType'] ) ) {

Expand Down
45 changes: 31 additions & 14 deletions includes/Embed_Base.php
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
use Google\Web_Stories\Model\Story;
use Google\Web_Stories\Renderer\Story\Embed;
use Google\Web_Stories\Renderer\Story\Image;
use Google\Web_Stories\Renderer\Story\Singleton;

/**
* Embed block class.
Expand Down Expand Up @@ -138,6 +139,27 @@ public function filter_kses_allowed_html( $allowed_tags ) {
return $allowed_tags;
}

/**
* Renders a story with given attributes.
*
* @since 1.30.0
*
* @param Story $story Story instance.
* @param array<string, string|int> $attributes Embed render attributes.
* @return string Rendered embed output.
*/
public function render_story( Story $story, array $attributes ): string {
if ( is_feed() ) {
$renderer = new Image( $story );
} elseif ( ! empty( $attributes['previewOnly'] ) ) {
$renderer = new Singleton( $story, $this->assets );
} else {
$renderer = new Embed( $story, $this->assets, $this->context );
}

return $renderer->render( $attributes );
}

/**
* Renders an embed with given attributes.
*
Expand All @@ -148,7 +170,7 @@ public function filter_kses_allowed_html( $allowed_tags ) {
*/
public function render( array $attributes ): string {
// The only mandatory attribute.
if ( empty( $attributes['url'] ) ) {
if ( empty( $attributes['url'] ) && empty( $attributes['previewOnly'] ) ) {
return '';
}

Expand All @@ -164,13 +186,7 @@ public function render( array $attributes ): string {

$story = new Story( $data );

if ( is_feed() ) {
$renderer = new Image( $story );
} else {
$renderer = new Embed( $story, $this->assets, $this->context );
}

return $renderer->render( $attributes );
return $this->render_story( $story, $attributes );
}

/**
Expand All @@ -182,12 +198,13 @@ public function render( array $attributes ): string {
*/
protected function default_attrs(): array {
$attrs = [
'align' => 'none',
'height' => 600,
'poster' => '',
'url' => '',
'title' => '',
'width' => 360,
'align' => 'none',
'height' => 600,
'poster' => '',
'url' => '',
'title' => '',
'width' => 360,
'previewOnly' => false,
];

/**
Expand Down
221 changes: 221 additions & 0 deletions includes/Renderer/Story/Singleton.php
Original file line number Diff line number Diff line change
@@ -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
}
}

0 comments on commit a88ab7b

Please sign in to comment.