Blocks: Add block environment and directives support (edit vs save)
#48590
Conversation
This file contains 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
gziolo
force-pushed
the
add/element-env
branch
2 times, most recently
from
88539aa
to
6f6dcfd
Compare
|
Size Change: +331 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in de8bd7a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4697596194
|
gziolo
added
[Type] Technical Prototype
gziolo
changed the title
gziolo
changed the title
edit vs save)
gziolo
force-pushed
the
add/element-env
branch
4 times, most recently
from
9bfe954
to
24455c0
Compare
gziolo
added
[Status] Blocked
|
I'm marking this exploration as blocked. I plan to revisit it once Interactivity API lands in core, which according to Status update on the Interactivity API won't happen earlier than WordPress 6.5. |
gziolo
added
the
[Type] New API
gziolo
removed
the
[Status] Blocked
|
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.
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. |
|
I'm closing it for now as non-actionable. Interactivity API ships in WordPress 6.5 scheduled for March 26th. We can always revisit it later once we get a better idea of how the experience around directives evolves. |
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?
Part of #41236.
❗ Still a work in progress. I will keep adding more details as I make progress.
Block Environment
Explores a mechanism improving developer experience to use one API (example:
useBlockProps,InnerBlocks) that run different code depending on the context:edit,save, or even maybeviewin the future. Co-authored by @luisherranz and inspired by the issue described in WordPress/block-interactivity-experiments#11.Block Directives
Block Directives is a new concept being explored for bringing to WordPress interactivity on the front end. The progress is tracked at WordPress/block-interactivity-experiments#80. Here we explore the idea of integrating directives in the block editor with
editandsave. Implementation is based on the React code that @luisherranz shared from his test on StackBlitz:https://stackblitz.com/edit/vitejs-vite-ju522f?file=src%2Fmain.jsx,src%2FcreateElement.js
I found some prior work that tried a custom version of
createElementin@wordpress/elementto use different components with React Native: #11129.Why?
Let me reprhase @luisherranz. Now that we can process HTML attributes in PHP thanks to the HTML Tag Processor, we can unify PHP and JS APIs to simplify the developer experience. We may even start sharing parts of the templating between the Editor and the render one day.
Another important consideration is the suboptimal developer experience when they need to learn all the subtle differences between:
useBlockProps()vsuseBlockProps.save()useInnerBlocksProps()vsuseInnerBlocksProps.save()vsInnerBlocksvsInnerBlocks.ContentRichTextvsRichText.ContentI was exposed to this issue's severity during CloudFest Hackathon 2022 (project recap). I witnessed how many mistakes happen because people don’t pass correctly class names and styles to
useBlockPropsineditandsave.It becomes even more problematic when you have to combine several APIs together, for example:
gutenberg/packages/block-library/src/paragraph/edit.js
Lines 127 to 131 in 0016e83
gutenberg/packages/block-library/src/query/save.js
Lines 8 to 10 in 6dadae1
I captured in WordPress/Learn#771 (comment) my biggest concerns with the current API while reviewing the initial version of the Course: Block Development for Learn WordPress authored by @mburridge:
I expanded very detailedly on the same topic in a later comment WordPress/Learn#771 (comment). The gist of it is that not using
useBlockPropswith many block supports features or passing props likeclassNameandstylein the wrong order leads to subtle bugs like in this example:Here
styleprop passed at the end will remove styles generated byuseBlockProps()hook. That's why I hope we can hide that complexity behind a new simplified API.How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast