Fix shortcode not showing in the widgets screen (#29282)

WordPress · Mar 3, 2021 · b691cac · b691cac
1 parent 9ce75be
commit b691cac
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 26 deletions.
diff --git a/lib/class-wp-widget-block.php b/lib/class-wp-widget-block.php
@@ -64,7 +64,10 @@ public function widget( $args, $instance ) {
 		$content = $wp_embed->run_shortcode( $instance['content'] );
 		$content = $wp_embed->autoembed( $content );
 
-		echo do_blocks( $content );
+		$content = do_blocks( $content );
+		$content = do_shortcode( $content );
+
+		echo $content;
 
 		echo $args['after_widget'];
 	}

diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -45,7 +45,7 @@ describe( 'Widgets screen', () => {
 		await activateTheme( 'twentytwentyone' );
 	} );
 
-	async function getParagraphBlockInGlobalInserter() {
+	async function getBlockInGlobalInserter( blockName ) {
 		await page.click(
 			'button[aria-pressed="false"][aria-label="Add block"]'
 		);
@@ -58,11 +58,11 @@ describe( 'Widgets screen', () => {
 		const categoryHeader = await blockLibrary.$$( 'h2' );
 		expect( categoryHeader.length > 0 ).toBe( true );
 
-		const [ addParagraphBlock ] = await blockLibrary.$x(
-			'//*[@role="option"][*[text()="Paragraph"]]'
+		const [ addBlock ] = await blockLibrary.$x(
+			`//*[@role="option"][*[text()="${ blockName }"]]`
 		);
 
-		return addParagraphBlock;
+		return addBlock;
 	}
 
 	async function expectInsertionPointIndicatorToBeBelowLastBlock(
@@ -98,40 +98,50 @@ describe( 'Widgets screen', () => {
 		);
 		const [ firstWidgetArea ] = widgetAreas;
 
-		let addParagraphBlock = await getParagraphBlockInGlobalInserter();
+		let addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
 		await addParagraphBlock.hover();
 
 		// FIXME: The insertion point indicator is not showing when the widget area has no blocks.
 		// await expectInsertionPointIndicatorToBeBelowLastBlock(
 		// 	firstWidgetArea
 		// );
 
-		await addParagraphBlock.focus();
-		await pressKeyWithModifier( 'primary', 'Enter' );
+		await addParagraphBlock.click();
 
-		const addedParagraphBlockInFirstWidgetArea = await firstWidgetArea.$(
+		let addedParagraphBlockInFirstWidgetArea = await firstWidgetArea.$(
 			'[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
 		);
-
-		expect(
-			await addedParagraphBlockInFirstWidgetArea.evaluate(
-				( node ) => node === document.activeElement
-			)
-		).toBe( true );
+		await addedParagraphBlockInFirstWidgetArea.focus();
 
 		await page.keyboard.type( 'First Paragraph' );
 
-		addParagraphBlock = await getParagraphBlockInGlobalInserter();
+		addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
 		await addParagraphBlock.hover();
 
 		await expectInsertionPointIndicatorToBeBelowLastBlock(
 			firstWidgetArea
 		);
 		await addParagraphBlock.focus();
-		await pressKeyWithModifier( 'primary', 'Enter' );
+		await addParagraphBlock.click();
 
+		addedParagraphBlockInFirstWidgetArea = await firstWidgetArea.$(
+			'[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
+		);
+		await addedParagraphBlockInFirstWidgetArea.focus();
 		await page.keyboard.type( 'Second Paragraph' );
 
+		const addShortCodeBlock = await getBlockInGlobalInserter( 'Shortcode' );
+		await addShortCodeBlock.click();
+
+		const shortCodeInput = await page.waitForSelector(
+			'textarea[aria-label="Shortcode text"]'
+		);
+		await shortCodeInput.focus();
+		// The famous Big Buck Bunny video.
+		await shortCodeInput.type(
+			'[video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"]'
+		);
+
 		/**
 		 * FIXME: There seems to have a bug when saving the widgets
 		 */
@@ -168,6 +178,9 @@ describe( 'Widgets screen', () => {
 		</div></div>
 		<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
 		<p>Second Paragraph</p>
+		</div></div>
+		<div class=\\"widget widget_block\\"><div class=\\"widget-content\\"><p><div style=\\"width: 580px;\\" class=\\"wp-video\\"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
+		<video class=\\"wp-video-shortcode\\" id=\\"video-0-1\\" width=\\"580\\" height=\\"326\\" preload=\\"metadata\\" controls=\\"controls\\"><source type=\\"video/mp4\\" src=\\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4?_=1\\" /><a href=\\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\\">http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4</a></video></div></p>
 		</div></div>",
 		}
 	` );
@@ -214,12 +227,7 @@ describe( 'Widgets screen', () => {
 			firstWidgetArea
 		);
 
-		expect(
-			await firstParagraphBlock.evaluate(
-				( node ) => node === document.activeElement
-			)
-		).toBe( true );
-
+		await firstParagraphBlock.focus();
 		await page.keyboard.type( 'First Paragraph' );
 
 		await page.keyboard.press( 'Enter' );
@@ -313,13 +321,13 @@ describe( 'Widgets screen', () => {
 			'[aria-label="Block: Widget Area"][role="group"]'
 		);
 
-		const addParagraphBlock = await getParagraphBlockInGlobalInserter();
-		await addParagraphBlock.focus();
-		await pressKeyWithModifier( 'primary', 'Enter' );
+		const addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
+		await addParagraphBlock.click();
 
 		let firstParagraphBlock = await firstWidgetArea.$(
 			'[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
 		);
+		await firstParagraphBlock.focus();
 		await page.keyboard.type( 'First Paragraph' );
 
 		await saveWidgets();