Skip to content
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.

Sign up for GitHub

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

Add Block Bindings Panel to Block Inspector #61527

Merged
merged 18 commits into from
May 17, 2024
Merged

Add Block Bindings Panel to Block Inspector #61527

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
9b3aa18
Add initial pass at bindings panel in Block Inspector
artemiomorales May 9, 2024
5551f32
Add bindings panel to inspector controls with tabs
artemiomorales May 9, 2024
1427173
Revise classnames and structure, add styles
artemiomorales May 9, 2024
ebc8e26
Rename BindingsPanel to BlockBindingsPanel
artemiomorales May 9, 2024
443c1b6
Include Bindings Panel with hooks instead
artemiomorales May 14, 2024
0485eeb
Revert extraneous changes
artemiomorales May 14, 2024
cc01bb7
Revert deletion of space
artemiomorales May 14, 2024
140d6bd
Remove unnecessary unlock
artemiomorales May 14, 2024
b8bbfff
Remove unused declaration
artemiomorales May 14, 2024
61e7b74
Simplify check for bindings
artemiomorales May 14, 2024
39c43f5
Rename file; update imports
artemiomorales May 14, 2024
3771101
Merge useSelect calls
artemiomorales May 15, 2024
f341e60
Use block context to look up bindings
artemiomorales May 16, 2024
7aee321
Add handling for unknown sources
artemiomorales May 17, 2024
6492787
Remove unnecessary use of index
artemiomorales May 17, 2024
22086a5
Simplify access of bindings
artemiomorales May 17, 2024
c664535
Use existing HStack instead of CSS
artemiomorales May 17, 2024
1c74ddc
Remove error state; show source name if label is undefined
artemiomorales May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions packages/block-editor/src/hooks/block-bindings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import {
PanelBody,
__experimentalHStack as HStack,
__experimentalItemGroup as ItemGroup,
__experimentalItem as Item,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import { unlock } from '../lock-unlock';
import InspectorControls from '../components/inspector-controls';

export const BlockBindingsPanel = ( { metadata } ) => {
const { bindings } = metadata || {};
const { sources } = useSelect( ( select ) => {
const _sources = unlock(
select( blocksStore )
).getAllBlockBindingsSources();

return {
sources: _sources,
};
}, [] );

if ( ! bindings ) {
return null;
}

return (
<InspectorControls>
<PanelBody
title={ __( 'Bindings' ) }
className="components-panel__block-bindings-panel"
>
<ItemGroup isBordered isSeparated size="large">
{ Object.keys( bindings ).map( ( key ) => {
return (
<Item key={ key }>
<HStack>
<span>{ key }</span>
<span className="components-item__block-bindings-source">
{ sources[ bindings[ key ].source ] ? (
sources[ bindings[ key ].source ]
.label
) : (
<span className="error">
Error: Unknown Source
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be translatable.

What about the case when the source gets registered only on the server? It's all custom sources these days because the client-side API is still private. @SantosGuillamot and I were discussing exposing the registered sources from the server in a different PR

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about the case when the source gets registered only on the server? It's all custom sources these days because the client-side API is still private. @SantosGuillamot and I were discussing exposing the registered sources from the server in a different PR

@gziolo I don't follow 🤔 Sources that get registered on the server using register_block_bindings_source() need to provide a label, which is what we would use here. The error would only arise when users try to bind a block to a source and mistype the source's name, or if they attempt to connect to a source that hasn't been registered. And as far as I see, the panel would get rendered regardless of what kind of block it is, core or custom, as long as it has the metadata.bindings property (though this should probably be tested — will take a look at that).

To clarify, what are you referring to when you say "client-side API", and how does it relate to this scenario?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The sources we are consuming in the editor need to be registered in JS as well. They provide functions to know how to get the values and how to update them in the editor. One example could be the post-meta source that is registered here.

Registering in the client is not mandatory, and it doesn't mean it won't work on the server. So it is not exactly an error. I believe right now we are using "Dynamic Data" as a generic message, but we could also fallback to the key maybe.

In the future, as Greg mentions, we would like to reuse the server registration somehow, but that will be handled in a separate PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok got it! Thanks so much for the explanation, that's very helpful 😄
I can revise to use the name in the binding when a label isn't present 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update: I've replaced the error with the machine-readable name.

</span>
) }
</span>
</HStack>
</Item>
);
} ) }
</ItemGroup>
</PanelBody>
</InspectorControls>
);
};

export default {
edit: BlockBindingsPanel,
attributeKeys: [ 'metadata' ],
hasSupport() {
return true;
},
};
8 changes: 8 additions & 0 deletions packages/block-editor/src/hooks/block-bindings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.components-panel__block-bindings-panel .components-item__block-bindings-source {

color: $gray-700;

.error {
color: $alert-red;
}
}
2 changes: 2 additions & 0 deletions packages/block-editor/src/hooks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,13 @@ import childLayout from './layout-child';
import contentLockUI from './content-lock-ui';
import './metadata';
import blockHooks from './block-hooks';
import blockBindingsPanel from './block-bindings';
import './block-renaming';
import './use-bindings-attributes';

createBlockEditFilter(
[
blockBindingsPanel,
align,
textAlign,
anchor,
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
@import "./components/tool-selector/style.scss";
@import "./components/url-input/style.scss";
@import "./components/url-popover/style.scss";
@import "./hooks/block-bindings.scss";
@import "./hooks/block-hooks.scss";
@import "./hooks/border.scss";
@import "./hooks/color.scss";
Expand Down
Loading