Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix shortcode not showing in the widgets screen #29282

Merged
merged 3 commits into from
Mar 3, 2021
Merged

Fix shortcode not showing in the widgets screen #29282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f8d21f1
Apply shortcode to the widgets
kevin940726 Feb 23, 2021
7b4efdc
Fix adding-widgets test
kevin940726 Feb 24, 2021
7932e26
Update snapshot
kevin940726 Feb 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion lib/class-wp-widget-block.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
}
Expand Down
58 changes: 33 additions & 25 deletions packages/e2e-tests/specs/widgets/adding-widgets.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]'
);
Expand All @@ -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(
Expand Down Expand Up @@ -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
*/
Expand Down Expand Up @@ -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>",
}
` );
Expand Down Expand Up @@ -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' );
Expand Down Expand Up @@ -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();
Expand Down