PHP-only blocks: ensure editor interactions and block supports work correctly#72039
Merged
PHP-only blocks: ensure editor interactions and block supports work correctly#72039
Conversation
priethor
added
[Type] Enhancement
priethor
force-pushed
the
add/php-auto-register-blocks-supports
branch
from
42e8d07 to
6a26046
Compare
priethor
requested review from
ajitbohra,
fabiankaegy,
nerrad and
ntwb
as code owners
|
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. |
priethor
changed the title
youknowriad
reviewed
Oct 2, 2025
Contributor
youknowriad
left a comment
youknowriad
left a comment
There was a problem hiding this comment.
How did we miss this haha
priethor
commented
Oct 2, 2025
|
Size Change: +125 B (+0.01%) Total Size: 1.96 MB
ℹ️ View Unchanged
|
priethor
commented
Oct 2, 2025
priethor
force-pushed
the
add/php-auto-register-blocks-supports
branch
from
461aca0 to
c5320c5
Compare
t-hamano
reviewed
Oct 2, 2025
|
Flaky tests detected in 3b6ec07. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18226938882
|
t-hamano
reviewed
Oct 2, 2025
youknowriad
reviewed
Oct 3, 2025
| dangerouslySetInnerHTML: { __html: content || '' }, | ||
| } ); | ||
| return ( | ||
| <div |
Contributor
There was a problem hiding this comment.
Are there auto-registered blocks who's wrapper is not a div?
Contributor
There was a problem hiding this comment.
Related question, is this div also present in the frontend or is this going to result in a different DOM tree than frontend?
Contributor
Author
There was a problem hiding this comment.
It's only for the editor; the frontend only shows the content of the render callback. I don't think it's a necessity to allow other wrappers, unless we add an optional attribute to allow a limited set of wrappers (e.g., figure)
Contributor
There was a problem hiding this comment.
I guess this is an issue for all blocks that use "server sider render" component or hook. I wonder if there's a way to unify the DOM trees. A question for later.
Contributor
Author
There was a problem hiding this comment.
This is the HTML of a test block followed by a regular table block, the
wrapper is only in the editor:
| Editor | Frontend |
|---|---|
 |
 |
Interestingly, the table uses the same wrapper in both, so as you say, it seems to be how the SSR hook works.
Contributor
There was a problem hiding this comment.
I understand that one of the reasons for not recommending the ServerSideRender package (or useServerSideRender hook) is that it creates the extra div wrapper in the Edit component. It would be great if we could make the DOM tree perfectly match on both the frontend and the editor. Do you guess this is technically possible?
Contributor
There was a problem hiding this comment.
We might be able to use a library like this
Contributor
There was a problem hiding this comment.
I think it's possible to try something like this yes, but I don't believe that's the reason for not using client side edit, client site edit is more about tailored UX.
Contributor
There was a problem hiding this comment.
client site edit is more about tailored UX.
I'm curious about this, for example, creating a React component dynamically based on a string defined on the PHP side?
Contributor
There was a problem hiding this comment.
I'm curious about this, for example, creating a React component dynamically based on a string defined on the PHP side?
No I meant that we don't recommend ServerSideRender because the ideal experience is that the block in the editor is interactive and updates as you make block modifications without reaching the server, which is not the case for ServerSiteRender.
That said, that doesn't stop us from making ServerSideRender better for those who use it and server side registered block. And using a library like you shared could be a good path forward to make the editor markup match the frontend.
youknowriad
approved these changes
Oct 3, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Part of #71792, follow-up to #71794. This PR enhances the PHP-only block auto-registration feature to properly use block props, making auto-registered blocks fully functional in the editor.
Why?
While trying to test block supports, I realized the existing PHP-only block auto-registration feature had some editor interaction issues: blocks couldn't be clicked, selected, or focused in the canvas because they were lacking editor attributes (tabindex, draggable, role, aria-label, data-* attributes, etc). The blocks and teir supports would work, but they had to be selected through the list view.
How?
useBlockProps()to make blocks interactive in the editor.Testing Instructions
Gutenberg Test Server-Side Rendered Blocktest/auto-register-blockScreenshots or screencast
Grabacion.de.pantalla.2025-10-02.a.las.17.30.59.mov
Grabacion.de.pantalla.2025-10-02.a.las.17.29.46.mov