From f515f85228c2debd6c47d84d11e6d98dad6a4ccd Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 19 May 2021 15:40:27 +0800 Subject: [PATCH] Fix adding and deleting legacy widgets --- .../sidebar-block-editor/sidebar-adapter.js | 14 +- .../e2e-tests/plugins/class-test-widget.php | 79 +++++++++ .../experiments/customizing-widgets.test.js | 152 ++++++++++++++++++ 3 files changed, 244 insertions(+), 1 deletion(-) create mode 100644 packages/e2e-tests/plugins/class-test-widget.php diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js b/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js index b984fba7ef44b2..86bf53be48f8d4 100644 --- a/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js +++ b/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js @@ -173,6 +173,8 @@ export default class SidebarAdapter { number = widgetModel.get( 'multi_number' ); } + widget.instance.is_widget_customizer_js_value = true; + const settingId = number ? `widget_${ widget.idBase }[${ number }]` : `widget_${ widget.idBase }`; @@ -200,6 +202,13 @@ export default class SidebarAdapter { _removeWidget( widget ) { const settingId = widgetIdToSettingId( widget.id ); + const setting = this.api( settingId ); + + if ( setting ) { + const instance = setting.get(); + this.widgetsCache.delete( instance ); + } + this.api.remove( settingId ); } @@ -277,7 +286,10 @@ export default class SidebarAdapter { return widgetId; } ); - // TODO: We should in theory also handle delete widgets here too. + const deletedWidgets = this.getWidgets().filter( + ( widget ) => ! nextWidgetIds.includes( widget.id ) + ); + deletedWidgets.forEach( ( widget ) => this._removeWidget( widget ) ); this.setting.set( nextWidgetIds ); diff --git a/packages/e2e-tests/plugins/class-test-widget.php b/packages/e2e-tests/plugins/class-test-widget.php new file mode 100644 index 00000000000000..a3ae60658c0d14 --- /dev/null +++ b/packages/e2e-tests/plugins/class-test-widget.php @@ -0,0 +1,79 @@ + 'Test widget.' ) + ); + } + + /** + * Outputs the content for the widget instance. + * + * @param array $args Display arguments including 'before_title', 'after_title', + * 'before_widget', and 'after_widget'. + * @param array $instance Settings for the current Block widget instance. + */ + public function widget( $args, $instance ) { + $title = apply_filters( 'widget_title', $instance['title'] ); + echo $args['before_widget']; + if ( ! empty( $title ) ) { + echo $args['before_title'] . $title . $args['after_title']; + } + echo 'Hello Test Widget'; + echo $args['after_widget']; + } + + /** + * Outputs the widget settings form. + * + * @param array $instance Current instance. + */ + public function form( $instance ) { + ?> +

+ + +

+ { await deactivatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' ); + await activatePlugin( 'gutenberg-test-widgets' ); } ); afterAll( async () => { await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' ); + await deactivatePlugin( 'gutenberg-test-widgets' ); await activateTheme( 'twentytwentyone' ); } ); @@ -510,6 +513,141 @@ describe( 'Widgets Customizer', () => { "The page delivered both an 'X-Frame-Options' header and a 'Content-Security-Policy' header with a 'frame-ancestors' directive. Although the 'X-Frame-Options' header alone would have blocked embedding, it has been ignored." ); } ); + + it( 'should handle legacy widgets', async () => { + const widgetsPanel = await find( { + role: 'heading', + name: /Widgets/, + level: 3, + } ); + await widgetsPanel.click(); + + const footer1Section = await find( { + role: 'heading', + name: /^Footer #1/, + level: 3, + } ); + await footer1Section.click(); + + const legacyWidgetBlock = await addBlock( 'Legacy Widget' ); + const selectLegacyWidgets = await find( { + role: 'combobox', + name: 'Select a legacy widget to display:', + } ); + await selectLegacyWidgets.select( 'test_widget' ); + + await expect( { + role: 'heading', + name: 'Test Widget', + level: 3, + } ).toBeFound( { root: legacyWidgetBlock } ); + + let titleInput = await find( + { + role: 'textbox', + name: 'Title:', + }, + { + root: legacyWidgetBlock, + } + ); + + await titleInput.type( 'Hello Title' ); + + // Unfocus the current legacy widget. + await page.keyboard.press( 'Tab' ); + + // Disable reason: Sometimes the preview just doesn't fully load, + // it's the only way I know for now to ensure that the iframe is ready. + // eslint-disable-next-line no-restricted-syntax + await page.waitForTimeout( 1000 ); + await waitForPreviewIframe(); + + // Expect the legacy widget to show in the site preview frame. + await expect( { + role: 'heading', + name: 'Hello Title', + } ).toBeFound( { + root: await find( { + name: 'Site Preview', + selector: 'iframe', + } ), + } ); + + // Expect the preview in block to show when unfocusing the legacy widget block. + await expect( { + role: 'heading', + name: 'Hello Title', + } ).toBeFound( { + root: await find( { + selector: 'iframe', + name: 'Legacy Widget Preview', + } ), + } ); + + await legacyWidgetBlock.focus(); + await showBlockToolbar(); + + // Testing removing the block. + await clickBlockToolbarButton( 'Options' ); + const removeBlockButton = await find( { + role: 'menuitem', + name: /Remove block/, + } ); + await removeBlockButton.click(); + + // Add it back again using the variant. + const testWidgetBlock = await addBlock( 'Test Widget' ); + + titleInput = await find( + { + role: 'textbox', + name: 'Title:', + }, + { + root: testWidgetBlock, + } + ); + + await titleInput.type( 'Hello again!' ); + // Unfocus the current legacy widget. + await page.keyboard.press( 'Tab' ); + + // Expect the preview in block to show when unfocusing the legacy widget block. + await expect( { + role: 'heading', + name: 'Hello again!', + } ).toBeFound( { + root: await find( { + selector: 'iframe', + name: 'Legacy Widget Preview', + } ), + } ); + + const publishButton = await find( { + role: 'button', + name: 'Publish', + } ); + await publishButton.click(); + + // Wait for publishing to finish. + await expect( publishButton ).toMatchQuery( { + disabled: true, + } ); + await page.waitForResponse( createURL( '/wp-admin/admin-ajax.php' ) ); + + expect( console ).toHaveWarned( + "The page delivered both an 'X-Frame-Options' header and a 'Content-Security-Policy' header with a 'frame-ancestors' directive. Although the 'X-Frame-Options' header alone would have blocked embedding, it has been ignored." + ); + + await page.goto( createURL( '/' ) ); + + // Expect the saved widgets to show on frontend. + await expect( { + role: 'heading', + name: 'Hello again!', + } ).toBeFound(); + } ); } ); /** @@ -562,6 +700,20 @@ async function addBlock( blockName ) { ); await addBlockButton.click(); + const searchBox = await find( { + role: 'searchbox', + name: 'Search for blocks and patterns', + } ); + + // Clear the input. + await searchBox.evaluate( ( node ) => { + if ( node.value ) { + node.value = ''; + } + } ); + + await searchBox.type( blockName ); + // TODO - remove this timeout when the test plugin for disabling CSS // animations in tests works properly. //