Fix: Shortcode block does not render in Navigation Overlay#77511
Conversation
There was a problem hiding this comment.
Pull request overview
Fixes missing shortcode expansion when a core/shortcode block is placed inside a Navigation Overlay template part, bringing the overlay’s rendered output in line with how template parts typically process shortcodes.
Changes:
- Expands shortcodes in Navigation overlay template part output by applying
shortcode_unautop()anddo_shortcode()to the rendered overlay HTML.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
t-hamano
left a comment
There was a problem hiding this comment.
Based on the processing of template parts, we need to consider whether to add some more processes in addition to shortcodes.
wptexturize(), convert_smilies(), and $wp_embed->autoembed() would likely be worth adding. wp_filter_content_tags() might not be necessary, though, as the navigation overlay is hidden by default.
|
Thanks @t-hamano For the review, Based on Claude it has to say this,
Comment - #77510 (comment) But yes a wider team review needed here to add the functionality or not. |
Is this true? Based on the code, gutenberg/packages/block-library/src/template-part/index.php Lines 152 to 168 in e406c2b |
|
@hbhalodia, can you check #77511 (comment)? |
Thanks @t-hamano for the review and sorry for the delay here in answering this. Since the PR used claude to identify the root cause and a fix for the same, I asked it why we are just using 2 function and not the other functions as above, Here is the response from claude, which it seems valid, but need more higher review from the team,
Detailed responseIn For Navigation overlay template parts, execution is different:
So by this point, we are not at the raw-content stage anymore.
Bottom lineThe bug is specifically: shortcodes in overlay template parts are not expanded. $overlay_blocks_html = shortcode_unautop( $overlay_blocks_html );
$overlay_blocks_html = do_shortcode( $overlay_blocks_html );Thanks to copilot and claude to remember the session that was added few weeks back 😄. Still need manual verification from the wider team on to include the other functions or not. |
Was answering the same, just hit re-review button before adding the comment. Sorry! |
|
@hbhalodia Thanks for the reply! Upon further investigation, I have confirmed that However, it is important where it is processed. In normal template parts, shortcodes are processed For example, try inserting the following shortcode into both the normal template part and the overlay template part. add_shortcode( 'test', function() {
return '<span class="test">Shortcode Test</span>';
} );The final rendered HTML differs as follows. Normal Template Part: <p><span class="test">Shortcode Test</span></p>Overlay Template Part: <span class="test">Shortcode Test</span>To resolve this discrepancy, it might be better to process shortcodes diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 72eefc7ce05..9da5d75cabe 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -425,7 +425,11 @@ class WP_Navigation_Block_Renderer {
$full_template_part_id = $theme . '//' . $slug;
$block_template = get_block_file_template( $full_template_part_id, 'wp_template_part' );
if ( isset( $block_template->content ) ) {
- $parsed_blocks = parse_blocks( $block_template->content );
+ // Expand shortcodes before parsing blocks, matching the order in
+ // `render_block_core_template_part()`.
+ $content = shortcode_unautop( $block_template->content );
+ $content = do_shortcode( $content );
+ $parsed_blocks = parse_blocks( $content );
$blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
// Disable overlay menu for any navigation blocks within the overlay to prevent nested overlays.
$blocks = static::disable_overlay_menu_for_nested_navigation_blocks( $blocks );
@@ -449,6 +453,12 @@ class WP_Navigation_Block_Renderer {
// Re-serialize, and run Block Hooks algorithm to inject hooked blocks.
$markup = serialize_blocks( $blocks );
$markup = apply_block_hooks_to_content_from_post_object( $markup, $template_part_post );
+
+ // Expand shortcodes before parsing blocks, matching the order in
+ // `render_block_core_template_part()`.
+ $markup = shortcode_unautop( $markup );
+ $markup = do_shortcode( $markup );
+
$blocks = parse_blocks( $markup );
// Disable overlay menu for any navigation blocks within the overlay to prevent nested overlays.
@@ -700,11 +710,6 @@ class WP_Navigation_Block_Renderer {
// Render template part blocks directly without navigation container wrapper.
$overlay_blocks_html = static::get_template_part_blocks_html( $overlay_blocks );
- // Expand shortcodes in the overlay, matching what `render_block_core_template_part()`
- // does for regular template parts. See https://github.com/WordPress/gutenberg/issues/77510.
- $overlay_blocks_html = shortcode_unautop( $overlay_blocks_html );
- $overlay_blocks_html = do_shortcode( $overlay_blocks_html );
-
// Check if overlay contains a navigation-overlay-close block (detect in rendered HTML so it works with patterns).
$has_custom_overlay_close_block = block_core_navigation_overlay_html_has_close_block( $overlay_blocks_html );
// Add Interactivity API directives to the overlay close block if present. |
|
Thanks @t-hamano for the detailed analysis. I will check the above and update the PR as needed. I will test based on the shared findings. |
|
Hi @t-hamano, Thanks for the verification above. I do have tested it on my end by adding the shortcode in normal template part and navigation overlay. I can confirm after the change both are providing the same output in terms of markup generation. |
* Fix: Render shortcode in navigation overlay template * Add test case to support the fix * Remove cleanup for shortcode as not required * Add do_shortcode before blocks parsing to avoid unexpected markup difference * Remove the test shortcode code * Remove extra line change --------- Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: westonruter <westonruter@git.wordpress.org> Co-authored-by: Mathijsvdbeek <mathijsvdbeek@git.wordpress.org>
|
I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: 79d4258 |
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/branches/7.0@62360 602fd350-edb4-49c9-b593-d223f7449a82
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/branches/7.0@62360 git-svn-id: http://core.svn.wordpress.org/branches/7.0@61641 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: `git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy` Reviewed by desrosj. Merges [62360] to `trunk`. See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@62361 602fd350-edb4-49c9-b593-d223f7449a82
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: `git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy` Reviewed by desrosj. Merges [62360] to `trunk`. See #64595. Built from https://develop.svn.wordpress.org/trunk@62361 git-svn-id: http://core.svn.wordpress.org/trunk@61642 1a063a9b-81f0-0310-95a4-ce76da25c4cd
What?
Closes #77510
Why?
How?
render_block_core_template_partdoes.Testing Instructions
[test]as the content.Testing Instructions for Keyboard
Screenshots or screencast
Screen.Recording.2026-04-21.at.12.01.35.PM.mov
Use of AI Tools