Block Bindings: API to extend the UI to external sources. #71542
Conversation
|
Size Change: +737 B (+0.04%) Total Size: 1.96 MB
ℹ️ View Unchanged
|
cbravobernal
force-pushed
the
try/add-second-level-sources
branch
from
ace8414 to
f249b89
Compare
cbravobernal
force-pushed
the
try/add-second-level-sources
branch
from
c66b68e to
336ed00
Compare
|
Flaky tests detected in bf9f93c. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18276654962
|
|
Nice progress on this PR 🔥 |
It is almost ready to review. I only need to update the PR description. Edit: and fix the registration that broke everything 😆 |
cbravobernal
requested review from
ajitbohra,
ellatrix,
nerrad,
ntwb and
tellthemachines
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. |
|
Can you provide a more detailed explanation of the API proposed? In, particular What |
We should also pass the attribute to the modal by the way. The value is the 'value' from the 'value' key provided in the data, when the source data is selected. I agree that is not the best way to call it, as it may cause some confusions. I'll change it. Should we pass the entire data element? |
cbravobernal
force-pushed
the
try/add-second-level-sources
branch
from
04ee9c5 to
4e818c9
Compare
|
@gziolo I updated the code to use 'item' instead of 'value'. |
I see the updated core sources now use |
|
Ping to @chriszarate. Who did a review on a remote branch that I will address. That way we won't miss him on the props commit. |
|
I noticed that we were still showing the empty many if there were no compatible sources for a given bindable attribute: 
Since this is the first thing anyone who wants to try this out will see -- e.g. on the Paragraph block (unless they have any custom sources defined) -- I wanted to fix it. I've pushed some commits to do so. Code-wise, I've found some more duplication that we should eventually get rid of, and we should also review how we use and nest |
|
e2e tests are failing. I think I can repro locally: When selecting a Modal source (e.g. the one from the "Gutenberg Test Block Bindings" plugin used by e2e tests) and clicking one of the buttons in the modal, it doesn't disappear. I think that's a bug I must have introduced in one of my recent commits. Shouldn't be too hard to fix hopefully. |
TBH I'm not quite sure why/how it worked in the first place 🤔 (before my changes broke it). Anyway, here's one possible way of fixing this -- by passing a Patchdiff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js
index f0f0f625ab..a9f907df31 100644
--- a/packages/block-editor/src/hooks/block-bindings.js
+++ b/packages/block-editor/src/hooks/block-bindings.js
@@ -508,6 +508,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
return (
<RenderModalContent
attribute={ modalState.attribute }
+ closeModal={ handleCloseModal }
/>
);
} )() }
diff --git a/packages/e2e-tests/plugins/block-bindings/index.js b/packages/e2e-tests/plugins/block-bindings/index.js
index 2c25936633..8a116fc8fc 100644
--- a/packages/e2e-tests/plugins/block-bindings/index.js
+++ b/packages/e2e-tests/plugins/block-bindings/index.js
@@ -43,7 +43,7 @@ registerBlockBindingsSource( {
},
} );
-const ModalButton = ( { fieldKey, fieldLabel, attribute } ) => {
+const ModalButton = ( { fieldKey, fieldLabel, attribute, closeModal } ) => {
const { updateBlockBindings } = wp.blockEditor.useBlockBindingsUtils();
return el(
@@ -56,6 +56,7 @@ const ModalButton = ( { fieldKey, fieldLabel, attribute } ) => {
args: { key: fieldKey },
},
} );
+ closeModal();
},
style: {
display: 'block',
@@ -86,7 +87,7 @@ registerBlockBindingsSource( {
},
} )
),
- renderModalContent( { attribute } ) {
+ renderModalContent( { attribute, closeModal } ) {
return el(
'div',
{ style: { padding: '20px' } },
@@ -103,6 +104,7 @@ registerBlockBindingsSource( {
fieldKey: key,
fieldLabel: field?.label || key,
attribute,
+ closeModal,
} )
)
); |
I re-tested the behavior at 9e1455b (prior to my changes). It looks like the modal closed when first selecting a source value; but when subsequently re-opened, and selecting a different value, it stayed open:
That was probably unintentional, so I guess it's good to make it more consistent 🤔 Edit: e2e tests didn't detect this, since they only cover setting the binding via the modal once. |
|
Here's another -- unrelated issue I just found while testing. If I try to edit the value in the "Bindings" panel in the block inspector, it doesn't work. Instead, I'm getting a console error:
|
It is indeed e2e code only. The code is trying to edit "hardcoded" the post id 1 and type Edit: Fixed in 7095be1 |
I'm still getting an error, although the message is different now: 
I'll look into a fix. |
Context wasn't being exposed to the source. I've pushed a fix: 372c976 This removes the error. It's still not working for the "Modal Source" and "Complete Source" -- editing the text in the field in the "Bindings" panel doesn't show any effect. But at least the error is gone 😬 (Wondering a bit what's the purpose of that text field in the first place, and if it's used/required by e2e tests if it's not working 🤔) |
If you remove it, tests break, so yes, seems to be necessary 😆 |
Looks like the error I initially saw is also present on |
6 participants
What?
This PR introduces a Block Bindings EditorUI API that allows third-party developers to extend the block bindings UI with their own sources.
Why?
The existing block bindings system lacked for an extensible UI: No way for plugins to customize the bindings interface
How
Dropdown Mode:
Modal Mode:
The attributes validation is made following this docs: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation
String values can also contain : https://developer.wordpress.org/rest-api/extending-the-rest-api/schema/#format
getFieldsListbackwards compatible? (Already done)For follow-up PRs:
isCheckedsolution. Do not make it key dependant.Screenshot
testing.mp4