PHP-only blocks: Refactor controls to use ToolsPanel#75124
Conversation
|
Size Change: +68 B (0%) Total Size: 3 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 939dc41. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/21577778375
|
| // Verify auto-generated controls are present | ||
| // String attribute → text input | ||
| await expect( page.getByLabel( 'Title' ) ).toBeVisible(); | ||
| const titleInput = page.getByRole( 'textbox', { name: 'Title' } ); |
There was a problem hiding this comment.
I made some improvements to the existing test.
|
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. |
|
Thanks for doing this, it makes a lot of sense to me :) |
| <DataForm | ||
| data={ attributes } | ||
| fields={ [ field ] } | ||
| form={ { fields: [ field.id ] } } |
There was a problem hiding this comment.
It is a little bit weird that we generate a dataform per field, but maybe it's ok.
There was a problem hiding this comment.
I also don't know how to feel about this, but it's easy to iterate on if need be. :)
youknowriad
left a comment
There was a problem hiding this comment.
LGTM 👍 Would love @mcsf input if you have time.
|
Actually let's give this PR some time. What I'm wondering is how does this PR support the "form" property that we'll be able to set per block type in the block.json. (that property already exists in either bindings or patterns, I don't recall) In other words, how can we ensure that by default the behavior is the "ToolPanel" behavior like rendered in this PR but if the block author specifies a specific form, we use that form instead. I think the solution is probably something along the following lines:
|
| <DataForm | ||
| data={ attributes } | ||
| fields={ [ field ] } | ||
| form={ { fields: [ field.id ] } } |
There was a problem hiding this comment.
I also don't know how to feel about this, but it's easy to iterate on if need be. :)
It's for the block fields gutenberg experiment. Just wanted to mention that a discussion about using the same dataform for the PHP-only blocks dataform and the Block Fields dataform in the past - Block Fields: Align implementation with PHP-only block dataform. I think the approach mentioned above (#75124 (comment)) could work well for both. |
Sounds reasonable, but cc @oandregal |
|
Thanks for the feedback!
I see, let's freeze this pull request and explore a more ideal approach. |
|
I've taken a look at how this works and this PR is fine to ship. I agree with what Riad shared here as the way forward, but nothing that I see prevents us from updating this code in the future. @t-hamano I'm happy to review/assist with that work if you're interested/willing to take it (first step would be to develop a new DataForm layout). |
Related to:
What? Why?
Currently, the settings panels for all core blocks have been refactored to use
ToolsPanel. Following this, I personally recommend usingToolsPanelfor the PHP-only block as well.This also has the advantage of making it easy to restore the default values assigned to the block.
How?
Since the
DataFormcomponent renders all fields, it is not possible to wrap each field in aToolsPanelItem. Therefore, I assigned aDataFormto each field individually.Testing Instructions
Use the following code to register a sample PHP-only block:
Screenshots or screencast