-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Blocks: Add block environment and directives support (edit
vs save
)
#48590
Conversation
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
|
edit
vs save
)
9bfe954
to
24455c0
Compare
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. |
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. |
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 maybeview
in 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
edit
andsave
. 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
createElement
in@wordpress/element
to 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()
vsInnerBlocks
vsInnerBlocks.Content
RichText
vsRichText.Content
I 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
useBlockProps
inedit
andsave
.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
useBlockProps
with many block supports features or passing props likeclassName
andstyle
in the wrong order leads to subtle bugs like in this example:Here
style
prop 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