diff --git a/blocks/embed/block.json b/blocks/embed/block.json index 731b11b0a5db..4a216bb406f3 100644 --- a/blocks/embed/block.json +++ b/blocks/embed/block.json @@ -85,6 +85,8 @@ } }, "supports": { - "align": ["wide", "full", "left", "right", "center"] - } + "align": ["wide", "full", "left", "right", "center"], + "interactivity": true + }, + "viewScriptModule": "file:../../assets/js/web-stories-block-view.js" } diff --git a/includes/Renderer/Stories/Carousel_Renderer.php b/includes/Renderer/Stories/Carousel_Renderer.php index 5c937e7905f3..118f248dae16 100644 --- a/includes/Renderer/Stories/Carousel_Renderer.php +++ b/includes/Renderer/Stories/Carousel_Renderer.php @@ -147,6 +147,8 @@ function () { get_view_type(); $content = (string) ob_get_clean(); + $content = wp_interactivity_process_directives( $content ); + /** * Filters the Generic renderer stories content. * diff --git a/includes/Renderer/Stories/Renderer.php b/includes/Renderer/Stories/Renderer.php index f1ac41677983..3f2ff3290eb6 100644 --- a/includes/Renderer/Stories/Renderer.php +++ b/includes/Renderer/Stories/Renderer.php @@ -55,11 +55,6 @@ abstract class Renderer implements RenderingInterface, Iterator { */ public const STYLE_HANDLE = 'web-stories-list-styles'; - /** - * Web Stories stylesheet handle. - */ - public const LIGHTBOX_SCRIPT_HANDLE = 'web-stories-lightbox'; - /** * Number of instances invoked. Kept it static to keep track. */ @@ -277,9 +272,6 @@ public function load_assets(): void { // Web Stories styles for AMP and non-AMP pages. $this->assets->register_style_asset( self::STYLE_HANDLE ); - // Web Stories lightbox script. - $this->assets->register_script_asset( self::LIGHTBOX_SCRIPT_HANDLE, [ AMP_Story_Player_Assets::SCRIPT_HANDLE ] ); - if ( \defined( 'AMPFORWP_VERSION' ) ) { add_action( 'amp_post_template_css', [ $this, 'add_amp_post_template_css' ] ); } @@ -377,9 +369,22 @@ class="" } else { $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( self::LIGHTBOX_SCRIPT_HANDLE ); ?> -
+
$this->instance_id, + ] + ) + ); + ?> + data-wp-on--click="actions.open" + data-wp-on-window--popstate="actions.onPopstate" + > render_story_with_poster(); ?>
- + @@ -832,6 +844,9 @@ class="story-lightbox__close-button" width="3.6" height="6" layout="responsive" + data-wp-interactive="web-stories-block" + data-wp-on--amp-story-player-close="actions.close" + data-wp-on--navigation="actions.navigation" > render_link_attributes(); ?>>get_title() ); ?> diff --git a/includes/Renderer/Story/Embed.php b/includes/Renderer/Story/Embed.php index 5c33406faa25..fdc59ad37016 100644 --- a/includes/Renderer/Story/Embed.php +++ b/includes/Renderer/Story/Embed.php @@ -119,7 +119,8 @@ public function render( array $args = [] ): string { + layout="intrinsic" + > 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(); @@ -144,7 +143,14 @@ public function render( array $args = [] ): string { ?>
- + diff --git a/package-lock.json b/package-lock.json index cab1cece48a2..ce20794d2d6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5068,6 +5068,32 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@preact/signals": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@preact/signals/-/signals-1.3.1.tgz", + "integrity": "sha512-nNvSF2O7RDzxp1Rm7SkA5QhN1a2kN8pGE8J5o6UjgDof0F0Vlg6d6HUUVxxqZ1uJrN9xnH2DpL6rpII3Es0SsQ==", + "license": "MIT", + "dependencies": { + "@preact/signals-core": "^1.7.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + }, + "peerDependencies": { + "preact": "10.x" + } + }, + "node_modules/@preact/signals-core": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.8.0.tgz", + "integrity": "sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/@prettier/plugin-xml": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/@prettier/plugin-xml/-/plugin-xml-3.4.1.tgz", @@ -10360,6 +10386,20 @@ "loose-envify": "^1.1.0" } }, + "node_modules/@wordpress/interactivity": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/@wordpress/interactivity/-/interactivity-6.13.0.tgz", + "integrity": "sha512-FIzfCYbb2gjj5gWCRm5086zlFezZZjjL9zopUBPn6WuuaL5w8zMNBU5YJDnZExK0MURRLLRMqHx+3LwAmm95KQ==", + "license": "GPL-2.0-or-later", + "dependencies": { + "@preact/signals": "^1.3.0", + "preact": "^10.24.2" + }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + } + }, "node_modules/@wordpress/is-shallow-equal": { "version": "4.47.0", "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-4.47.0.tgz", @@ -28163,6 +28203,16 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, + "node_modules/preact": { + "version": "10.25.1", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.25.1.tgz", + "integrity": "sha512-frxeZV2vhQSohQwJ7FvlqC40ze89+8friponWUFeVEkaCfhC6Eu4V0iND5C9CXz8JLndV07QRDeXzH1+Anz5Og==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -31577,6 +31627,10 @@ "node": ">= 0.4" } }, + "node_modules/stories-block-view": { + "resolved": "packages/stories-block-view", + "link": true + }, "node_modules/storybook": { "version": "8.4.6", "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.4.6.tgz", @@ -36828,6 +36882,13 @@ "npm": ">= 7.3" } }, + "packages/stories-block-view": { + "version": "1.0.0", + "license": "Apache-2.0", + "dependencies": { + "@wordpress/interactivity": "^6.0.0" + } + }, "packages/stories-block/node_modules/@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", diff --git a/packages/stories-block-view/package.json b/packages/stories-block-view/package.json new file mode 100644 index 000000000000..80a1ac427d65 --- /dev/null +++ b/packages/stories-block-view/package.json @@ -0,0 +1,33 @@ +{ + "name": "stories-block-view", + "description": "Web Stories package to view a story", + "version": "1.0.0", + "author": { + "name": "Google", + "url": "https://creators.google/" + }, + "license": "Apache-2.0", + "keywords": [ + "web stories" + ], + "homepage": "https://github.com/GoogleForCreators/web-stories-wp/blob/main/packages/stories-block-view/README.md", + "repository": { + "type": "git", + "url": "git+https://github.com/GoogleForCreators/web-stories-wp.git", + "directory": "packages/stories-block-view" + }, + "bugs": { + "url": "https://github.com/GoogleForCreators/web-stories-wp/issues" + }, + "main": "dist/index.js", + "module": "dist-module/index.js", + "types": "dist-types/index.d.ts", + "source": "src/index.ts", + "publishConfig": { + "access": "public" + }, + "sideEffects": false, + "dependencies": { + "@wordpress/interactivity": "^6.0.0" + } +} diff --git a/packages/stories-block-view/src/index.js b/packages/stories-block-view/src/index.js new file mode 100644 index 000000000000..99e5dbb55f0f --- /dev/null +++ b/packages/stories-block-view/src/index.js @@ -0,0 +1,122 @@ +/* + * Copyright 2024 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. + */ + +/** + * WordPress dependencies + */ +import { store, getContext, getElement } from '@wordpress/interactivity'; + +const { state, actions } = store('web-stories-block', { + state: { + lightboxElement: null, + player: null, + stories: null, + instanceId: null, + currentLocation: null, + }, + actions: { + storyContentReady: (storyObject, callback, maxRetries = 5) => { + const stateIntervalObj = setInterval(() => { + if (storyObject.storyContentLoaded === true) { + window.clearInterval(stateIntervalObj); + callback(); + } + if (!--maxRetries) { + window.clearInterval(stateIntervalObj); + } + }, 250); + }, + close: () => { + history.pushState({}, '', state.currentLocation); + + const { player, lightboxElement } = state; + if (!player) { + return; + } + + // Rewind the story and pause there upon closing the lightbox. + player.rewind(); + player.pause(); + player.mute(); + + lightboxElement.classList.toggle('show'); + document.body.classList.toggle('web-stories-lightbox-open'); + }, + open: (event) => { + event.preventDefault(); + const { ref: card } = getElement(); + const context = JSON.parse(getContext().replaceAll("'", '')); + const lightboxElement = + document.querySelector( + `.ws-lightbox-${context.instanceId} .web-stories-list__lightbox` + ) || + document.querySelector( + `.ws-lightbox-${context.instanceId} .web-stories-singleton__lightbox` + ); + const player = lightboxElement.querySelector('amp-story-player'); + const stories = player.getStories(); + + state.lightboxElement = lightboxElement; + state.player = player; + state.stories = stories; + state.instanceId = context.instanceId; + state.currentLocation = location.href; + + const storyObject = stories.find( + (story) => story.href === card.querySelector('a').href + ); + + player.show(storyObject.href); + player.play(); + + actions.storyContentReady(storyObject, () => { + history.pushState({}, '', storyObject.href); + }); + + lightboxElement.classList.toggle('show'); + document.body.classList.toggle('web-stories-lightbox-open'); + }, + navigation: (event) => { + const storyObject = state.stories[event.detail.index]; + if (storyObject && storyObject.href !== document.location.href) { + actions.storyContentReady(storyObject, () => { + history.pushState({}, '', storyObject.href); + }); + } + }, + onPopstate: () => { + const lightboxElement = state.lightboxElement; + const player = state.player; + const isLightboxOpen = lightboxElement.classList.contains('show'); + + const storyObject = state.stories.find( + (story) => story.href === document.location.href + ); + + if (storyObject) { + if (!isLightboxOpen) { + lightboxElement.classList.toggle('show'); + document.body.classList.toggle('web-stories-lightbox-open'); + player.play(); + } + + player.show(storyObject.href); + } else if (isLightboxOpen) { + actions.close(); + } + }, + }, +}); diff --git a/packages/stories-lightbox/README.md b/packages/stories-lightbox/README.md deleted file mode 100644 index 16ee294b5258..000000000000 --- a/packages/stories-lightbox/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Lightbox - -Handles the 'amp-story-player' lightbox. diff --git a/packages/stories-lightbox/package.json b/packages/stories-lightbox/package.json deleted file mode 100644 index 308ce2b9defe..000000000000 --- a/packages/stories-lightbox/package.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "name": "@web-stories-wp/stories-lightbox", - "description": "Web Stories embeds lightbox script", - "private": true, - "author": { - "name": "Google", - "url": "https://creators.google/" - }, - "license": "Apache-2.0", - "keywords": [ - "web stories" - ], - "homepage": "https://github.com/GoogleForCreators/web-stories-wp/blob/main/packages/stories-lightobx/README.md", - "repository": { - "type": "git", - "url": "https://github.com/GoogleForCreators/web-stories-wp.git", - "directory": "packages/stories-lightbox" - }, - "bugs": { - "url": "https://github.com/googleforcreators/web-stories-wp/issues" - }, - "engines": { - "node": ">= 12 || >= 14 || >= 16 || >= 18 || >= 20", - "npm": ">= 7.3" - }, - "type": "module", - "main": "./src/index.js", - "dependencies": { - "@wordpress/dom-ready": "^3.47.0" - }, - "devDependencies": {} -} diff --git a/packages/stories-lightbox/src/index.js b/packages/stories-lightbox/src/index.js deleted file mode 100644 index 642af185fb7d..000000000000 --- a/packages/stories-lightbox/src/index.js +++ /dev/null @@ -1,29 +0,0 @@ -/* - * Copyright 2021 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. - */ - -/** - * WordPress dependencies - */ -import domReady from '@wordpress/dom-ready'; - -/** - * Internal dependencies - */ -import initializeWebStoryLightbox from './web-stories-lightbox'; - -domReady(() => { - initializeWebStoryLightbox(); -}); diff --git a/packages/stories-lightbox/src/web-stories-lightbox.js b/packages/stories-lightbox/src/web-stories-lightbox.js deleted file mode 100644 index 8265ba727f61..000000000000 --- a/packages/stories-lightbox/src/web-stories-lightbox.js +++ /dev/null @@ -1,172 +0,0 @@ -/* - * Copyright 2021 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. - */ - -/** - * Handles the 'amp-story-player' lightbox. - * - * Displays the story that user interacted with in a lightbox. - */ -class Lightbox { - constructor(wrapperDiv) { - if ('undefined' === typeof wrapperDiv) { - return; - } - - this.lightboxInitialized = false; - this.wrapperDiv = wrapperDiv; - this.instanceId = this.wrapperDiv.dataset.id; - this.lightboxElement = - document.querySelector( - `.ws-lightbox-${this.instanceId} .web-stories-list__lightbox` - ) || - document.querySelector( - `.ws-lightbox-${this.instanceId} .web-stories-singleton__lightbox` - ); - this.player = this.lightboxElement.querySelector('amp-story-player'); - this.currentLocation = location.href; - - if ( - 'undefined' === typeof this.player || - 'undefined' === typeof this.lightboxElement - ) { - return; - } - - if (this.player.isReady && !this.lightboxInitialized) { - this.initializeLightbox(); - } - - this.player.addEventListener('ready', () => { - if (!this.lightboxInitialized) { - this.initializeLightbox(); - } - }); - - this.player.addEventListener('navigation', (event) => { - const storyObject = this.stories[event.detail.index]; - if (storyObject && storyObject.href !== document.location.href) { - this.storyContentReady(storyObject, () => { - history.pushState({}, '', storyObject.href); - }); - } - }); - - const player = this.player; - const lightboxElement = this.lightboxElement; - - function closeLightbox() { - if (!player) { - return; - } - - // Rewind the story and pause there upon closing the lightbox. - player.rewind(); - player.pause(); - player.mute(); - - lightboxElement.classList.toggle('show'); - document.body.classList.toggle('web-stories-lightbox-open'); - } - - // Event triggered when user clicks on close (X) button. - this.player.addEventListener('amp-story-player-close', () => { - history.pushState({}, '', this.currentLocation); - - closeLightbox(); - }); - - window.addEventListener('popstate', () => { - const isLightboxOpen = this.lightboxElement.classList.contains('show'); - - const storyObject = this.stories.find( - (story) => story.href === document.location.href - ); - - if (storyObject) { - if (!isLightboxOpen) { - this.lightboxElement.classList.toggle('show'); - document.body.classList.toggle('web-stories-lightbox-open'); - this.player.play(); - } - - this.player.show(storyObject.href); - } else if (isLightboxOpen) { - closeLightbox(); - } - }); - } - - initializeLightbox() { - this.stories = this.player.getStories(); - this.bindStoryClickListeners(); - this.lightboxInitialized = true; - } - - bindStoryClickListeners() { - const cards = this.wrapperDiv.querySelectorAll( - '.web-stories-list__story,.wp-block-embed__wrapper' - ); - - cards.forEach((card) => { - card.addEventListener('click', (event) => { - event.preventDefault(); - const storyObject = this.stories.find( - (story) => story.href === card.querySelector('a').href - ); - this.player.show(storyObject.href); - this.player.play(); - - this.storyContentReady(storyObject, () => { - history.pushState({}, '', storyObject.href); - }); - - this.lightboxElement.classList.toggle('show'); - document.body.classList.toggle('web-stories-lightbox-open'); - }); - }); - } - - /** - * Executes supplied `callback` after the story is fully loaded into player. - * - * @param {*} storyObject Story object to check for. Reference: https://github.com/ampproject/amphtml/blob/4ce3cd79520dbeaf5ed5364cbff58d3d71dee40e/src/amp-story-player/amp-story-player-impl.js#L115-L129. - * @param {*} callback Callback to execute when story is loaded fully. - * @param {number} maxRetries Number of tries to check for. - */ - storyContentReady(storyObject, callback, maxRetries = 5) { - const stateIntervalObj = setInterval(() => { - if (storyObject.storyContentLoaded === true) { - window.clearInterval(stateIntervalObj); - callback(); - } - if (!--maxRetries) { - window.clearInterval(stateIntervalObj); - } - }, 250); - } -} - -export default function initializeWebStoryLightbox() { - const webStoryBlocks = document.querySelectorAll( - '.web-stories-list,.web-stories-singleton' - ); - if ('undefined' !== typeof webStoryBlocks) { - Array.from(webStoryBlocks).forEach((webStoryBlock) => { - /* eslint-disable-next-line no-new -- we do not store the object as no further computation required. */ - new Lightbox(webStoryBlock); - }); - } -} diff --git a/tests/phpunit/integration/tests/Media/Types.php b/tests/phpunit/integration/tests/Media/Types.php index 6b39e93aa0e6..0e5d9c2342c6 100644 --- a/tests/phpunit/integration/tests/Media/Types.php +++ b/tests/phpunit/integration/tests/Media/Types.php @@ -112,7 +112,6 @@ public function test_get_allowed_mime_types_multisite(): void { } $actual = $this->instance->get_allowed_mime_types(); - $this->assertEqualSets( $expected, $actual ); } diff --git a/tests/phpunit/integration/tests/Renderer/Stories/Carousel_Renderer.php b/tests/phpunit/integration/tests/Renderer/Stories/Carousel_Renderer.php index 3e8be7972ff1..2d7d652de709 100644 --- a/tests/phpunit/integration/tests/Renderer/Stories/Carousel_Renderer.php +++ b/tests/phpunit/integration/tests/Renderer/Stories/Carousel_Renderer.php @@ -75,6 +75,7 @@ public function set_up(): void { */ public function test_init(): void { + $wp_version = get_bloginfo( 'version' ); $this->story_query->method( 'get_story_attributes' )->willReturn( [ 'view_type' => 'carousel', @@ -86,7 +87,6 @@ public function test_init(): void { $renderer->init(); $this->assertTrue( wp_style_is( $renderer::STYLE_HANDLE, 'registered' ) ); - $this->assertTrue( wp_script_is( $renderer::LIGHTBOX_SCRIPT_HANDLE, 'registered' ) ); $this->assertTrue( wp_script_is( $renderer::SCRIPT_HANDLE, 'registered' ) ); $this->assertTrue( wp_style_is( $renderer::SCRIPT_HANDLE, 'registered' ) ); } diff --git a/tests/phpunit/integration/tests/Renderer/Stories/Generic_Renderer.php b/tests/phpunit/integration/tests/Renderer/Stories/Generic_Renderer.php index d9d28a48c25c..7a26bd27ef09 100644 --- a/tests/phpunit/integration/tests/Renderer/Stories/Generic_Renderer.php +++ b/tests/phpunit/integration/tests/Renderer/Stories/Generic_Renderer.php @@ -87,6 +87,7 @@ public function tear_down(): void { */ public function test_load_assets(): void { + $wp_version = get_bloginfo( 'version' ); $this->story_query->method( 'get_story_attributes' )->willReturn( [ 'class' => '', @@ -98,7 +99,6 @@ public function test_load_assets(): void { $renderer = new \Google\Web_Stories\Renderer\Stories\Generic_Renderer( $this->story_query ); $renderer->init(); - $this->assertTrue( wp_script_is( Renderer::LIGHTBOX_SCRIPT_HANDLE, 'registered' ) ); $this->assertTrue( wp_style_is( Renderer::STYLE_HANDLE, 'registered' ) ); } @@ -107,6 +107,7 @@ public function test_load_assets(): void { */ public function test_render(): void { + $wp_version = get_bloginfo( 'version' ); $this->story_query->method( 'get_story_attributes' )->willReturn( [ 'view_type' => 'grid', @@ -132,7 +133,5 @@ public function test_render(): void { $this->assertStringContainsString( 'web-stories-list alignnone is-view-type-grid', $output ); $this->assertStringContainsString( 'web-stories-list__story', $output ); $this->assertStringContainsString( 'web-stories-list__story-poster', $output ); - - $this->assertTrue( wp_script_is( Renderer::LIGHTBOX_SCRIPT_HANDLE ) ); } } diff --git a/webpack.config.cjs b/webpack.config.cjs index 7580fdd1eb3d..d9fc87ce0faf 100644 --- a/webpack.config.cjs +++ b/webpack.config.cjs @@ -394,7 +394,6 @@ const editorAndDashboard = { const webStoriesScripts = { ...sharedConfig, entry: { - 'web-stories-lightbox': './packages/stories-lightbox/src/index.js', 'web-stories-carousel': './packages/stories-carousel/src/index.js', }, plugins: [ @@ -442,6 +441,25 @@ const webStoriesBlock = { ].filter(Boolean), }; +const webStoriesBlockView = { + ...sharedConfig, + output: { ...sharedConfig.output, module: true }, + experiments: { outputModule: true }, + entry: { + 'web-stories-block-view': './packages/stories-block-view/src/index.js', + }, + plugins: [ + ...sharedConfig.plugins.filter( + (plugin) => !(plugin instanceof DependencyExtractionWebpackPlugin) + ), + new WebpackBar({ + name: 'Web Stories Block View', + color: '#a9db14', + }), + new DependencyExtractionWebpackPlugin(), + ].filter(Boolean), +}; + const activationNotice = { ...sharedConfig, entry: { @@ -494,4 +512,5 @@ module.exports = [ webStoriesScripts, widgetScript, storiesMCEButton, + webStoriesBlockView, ];