Skip to content

Shortcode: Add the ability to preview the inserted shortcode#70532

Open
shubhtoy wants to merge 3 commits into
WordPress:trunkfrom
shubhtoy:enhance/shortcode-preview
Open

Shortcode: Add the ability to preview the inserted shortcode#70532
shubhtoy wants to merge 3 commits into
WordPress:trunkfrom
shubhtoy:enhance/shortcode-preview

Conversation

@shubhtoy

@shubhtoy shubhtoy commented Jun 26, 2025

Copy link
Copy Markdown

What?

Closes #70519

Adds preview functionality to the core/shortcode block following the same pattern as the custom HTML block.

Why?

Previously, the shortcode block only showed a text input field in the editor without any visual preview of how the shortcode would render. This made it difficult for users to see what their shortcode output would look like without switching to the frontend or preview mode. The custom HTML block already had this preview functionality, and it makes sense to provide the same user experience for shortcodes.

How?

The implementation follows the same pattern as the custom HTML block:

Editor Changes (edit.js):

  • Added preview state management with useState and isPreview
  • Added toolbar buttons to switch between "Edit" and "Preview" modes
  • Added ServerSideRender component to render shortcode preview
  • Added accessibility support with VisuallyHidden description
  • The preview shows when in preview mode, preview editor mode, or when disabled

Server-side Changes (index.php):

  • Modified render_block_core_shortcode() to detect when called from ServerSideRender (editor preview)
  • When the text attribute is present (from ServerSideRender), uses do_shortcode() to process the shortcode
  • Maintains backward compatibility for frontend rendering using wpautop() on block content

Testing Instructions

  1. Open the block editor and insert a shortcode block
  2. Enter a valid shortcode (e.g., [gallery] or any custom shortcode)
  3. Click the "Preview" button in the toolbar
  4. Verify the shortcode renders correctly in the preview
  5. Click the "Edit" button to return to the text input
  6. Test with various shortcodes to ensure proper rendering
  7. Verify the block still works correctly on the frontend

Screenshots or screencast

Before

Screen.Recording.2025-06-26.at.5.28.41.PM.mov

After

Screen.Recording.2025-06-26.at.5.29.38.PM.mov

@github-actions github-actions Bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jun 26, 2025
@github-actions

github-actions Bot commented Jun 26, 2025

Copy link
Copy Markdown

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @shubhtoy! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@shubhtoy shubhtoy force-pushed the enhance/shortcode-preview branch from 794f9ea to 0c9e4f5 Compare June 27, 2025 11:55
@shubhtoy shubhtoy marked this pull request as ready for review June 27, 2025 12:05
@github-actions

github-actions Bot commented Jun 27, 2025 •
edited
Loading

Copy link
Copy Markdown

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: shubhtoy <shubhtoy@git.wordpress.org>
Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions

github-actions Bot commented Jun 27, 2025

Copy link
Copy Markdown

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
  • Labels found: First-time Contributor.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@Infinite-Null

Infinite-Null commented Jun 27, 2025

Copy link
Copy Markdown
Contributor

Hi @shubhtoy, Great work 🚀, I have tested the PR, everything looks good and working:

Screen.Recording.2025-06-27.at.8.11.03.PM.mov

Just one thing, when there is no input in shortcode, it renders:
image
But if we do same in html block it dosent render anything, I think it will be better to have consistency in both.

Reference:

Screen.Recording.2025-06-27.at.8.13.00.PM.mov

@shubhtoy shubhtoy changed the title Shortcode: Add the ability to preview the inserted shortcode #70519 Shortcode: Add the ability to preview the inserted shortcode Jun 27, 2025
@shail-mehta shail-mehta added [Type] Enhancement A suggestion for improvement. [Block] Shortcode Affects the Shortcode Block labels Jun 27, 2025
@shubhtoy

shubhtoy commented Jun 30, 2025

Copy link
Copy Markdown
Author

Thanks @Infinite-Null for testing the PR, I'll look into this issue and push a patch soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

[Block] Shortcode Affects the Shortcode Block First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Shortcode: Add the ability to preview the inserted shortcode

3 participants

@shubhtoy @Infinite-Null @shail-mehta