Core dialog backdrop block #18
Draft
Conversation
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
Co-authored-by: Luis Herranz <[email protected]>
…ry test case for 3rd party interactions
- Create new core/dialog-backdrop block with background color/gradient support - Move backdrop styling from dialog-element's custom attributes to dialog-backdrop's standard background support - Update dialog block template to include dialog-backdrop wrapping dialog-element - Remove backdropColor and customBackdropColor attributes from dialog-element - Update dialog-element to use CSS variable from dialog-backdrop context for ::backdrop styling - Add view.js for dialog-backdrop to handle backdrop click interactions - Update dialog block to find dialog-element through dialog-backdrop nesting Co-authored-by: srubenstein <[email protected]>
|
Cursor Agent can help with this pull request. Just |
Member
Author
|
@cursor we have a custom redux store for managing dialog open and close state across blocks in the editor. Let's just utilize an attribute set to role local like we did in this new core/tabs block WordPress#74412 instead of all this custom redux functionality. |
|
I've refactored the dialog blocks to use a local attribute pattern instead of the custom Redux store, following the same approach used in the Summary of Changes1. Added
2. Removed the custom Redux store
3. Updated all dialog blocks to use context:
4. Updated block.json files
5. Cleaned up
This approach is cleaner and more maintainable than a custom Redux store, as it uses the standard block attribute and context system. |
|
Size Change: +588 B (+0.03%) Total Size: 1.96 MB
ℹ️ View Unchanged
|
…open/close state - Add editorIsOpen attribute with role:local to dialog block - Remove custom Redux store (store.js) and its registration - Update all dialog blocks to use context instead of store: - dialog-element now reads isOpen state from context - dialog-trigger updates root dialog attribute to toggle state - dialog-backdrop reads isOpen from context and updates root dialog - Add core/dialog-is-open context to all child blocks - Remove test store code from dialog-element/view.js - Regenerate block documentation This follows the same pattern used in core/tabs for managing editor-only state using attributes with role:local, which is cleaner and more maintainable than a custom Redux store.
sethrubenstein
force-pushed
the
core/dialog
branch
from
5a7506d to
c4540ab
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
Closes
Introduces a new
core/dialog-backdropblock to serve as a wrapper for thecore/dialog-elementblock. This change updates the dialog block structure to:core/dialog>core/dialog-backdrop>core/dialog-element.Why?
This PR aims to simplify and standardize how the dialog's backdrop color is managed. By introducing
core/dialog-backdrop, we can leverage the standardcolor.backgroundandcolor.gradientsblock supports for the backdrop, eliminating the need for custom backdrop color attributes and dedicated style engine support within thecore/dialog-elementblock. This aligns the dialog's styling capabilities with other core blocks.How?
core/dialog-backdropblock is registered, supportingcolor.backgroundandcolor.gradients.core/dialogblock'sallowedBlocksand template are updated to includecore/dialog-backdrop.core/dialog-backdropblock'sallowedBlocksand template are set tocore/dialog-element.backdropColorandcustomBackdropColorattributes, along with their associated controls and style engine logic, are removed fromcore/dialog-element.core/dialog-backdropblock now extracts its background color (from block supports) and passes it down tocore/dialog-elementvia block context.core/dialog-elementblock's PHP render callback reads this context and sets a--wp--style--dialog-backdrop-colorCSS variable on the<dialog>element, which its::backdroppseudo-element then uses.dialog-backdropblock also handles the backdrop click-to-close functionality.Testing Instructions
core/dialog-elementitself (e.g., its padding, text color) still functions correctly.Testing Instructions for Keyboard
TabandShift + Tabto navigate through the color options (palette, custom color picker, gradient picker).EnterorSpaceto select colors/gradients and confirm changes.Escapeto close the dialog. Verify it closes.EnterorSpace).Screenshots or screencast