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.

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

Block Bindings: Disable editing of bound block attributes in editor UI #58085

Merged
merged 27 commits into from
Jan 24, 2024
Merged
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
2f071ad
Add actions and selectors to register new sources
SantosGuillamot Jan 22, 2024
57ab9b2
Add hook to read the bindings attribute in Edit
SantosGuillamot Jan 22, 2024
445405f
Add context to all the blocks with bindings
SantosGuillamot Jan 22, 2024
af7f870
Lock rich text when `isContentBound` is true
SantosGuillamot Jan 22, 2024
c3567a4
Adapt paragraph and heading blocks UI
SantosGuillamot Jan 22, 2024
35c8c64
Adapt button block UI
SantosGuillamot Jan 22, 2024
989f456
Adapt image block UI
SantosGuillamot Jan 22, 2024
a4dc34a
Register post meta source
SantosGuillamot Jan 22, 2024
3515538
Don't use placeholder if attribute is `src` or `href`
SantosGuillamot Jan 23, 2024
41709fa
Always share placeholder in case meta is empty
SantosGuillamot Jan 23, 2024
1567f17
Remove `keyToLabel` and use just label
SantosGuillamot Jan 23, 2024
1984749
Remove source component until it is needed
SantosGuillamot Jan 23, 2024
9644946
Use translations in the source label
SantosGuillamot Jan 23, 2024
478f861
Move `select` inside `useSource`
SantosGuillamot Jan 23, 2024
2acf6bd
Read `lockEditorUI` prop and add it for patterns
SantosGuillamot Jan 23, 2024
a8a6da3
Move logic to lock editing directly to RichText
SantosGuillamot Jan 23, 2024
30b635e
Improve `useSelect` destructuring
SantosGuillamot Jan 23, 2024
a6f5fde
Load all image controls if attributes are bound
SantosGuillamot Jan 23, 2024
7d0cb9a
Remove unnecessary condition
SantosGuillamot Jan 23, 2024
e6a5a4d
Move `lockAttributesEditing` to source definition
SantosGuillamot Jan 23, 2024
7c1ca5a
Move `useSelect` into existing hook
SantosGuillamot Jan 23, 2024
4246260
Fix `RichText` not being selected on click
SantosGuillamot Jan 23, 2024
5a0cee8
Lock button and image controls only when selected
SantosGuillamot Jan 23, 2024
54c313d
Remove unnecesarry optional chaining
SantosGuillamot Jan 24, 2024
aaf8652
Move `shouldDisableEditing` logic inside callback
SantosGuillamot Jan 24, 2024
1f34e08
Merge branch 'trunk' into add/block-bindings-support-in-the-editor
SantosGuillamot Jan 24, 2024
895e6dd
Fix formatting issue
SantosGuillamot Jan 24, 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
Prev Previous commit
Next Next commit
Move shouldDisableEditing logic inside callback
  • Loading branch information
SantosGuillamot committed Jan 24, 2024
commit aaf8652d0e1facf6f1cd7431a4f96819e1f59c1b
64 changes: 32 additions & 32 deletions packages/block-editor/src/components/rich-text/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,6 @@ export function RichTextWrapper(
const selectionEnd = getSelectionEnd();
const blockBindings =
getBlockAttributes( clientId )?.metadata?.bindings;
const { getBlockBindingsSource } = unlock( select( blockEditorStore ) );

let isSelected;

Expand All @@ -146,26 +145,44 @@ export function RichTextWrapper(
isSelected = selectionStart.clientId === clientId;
}

// Disable Rich Text editing if block bindings specify that.
let shouldDisableEditing = false;
if ( blockBindings ) {
const blockTypeAttributes = getBlockType( blockName ).attributes;
const { getBlockBindingsSource } = unlock(
select( blockEditorStore )
);
for ( const [ attribute, args ] of Object.entries(
blockBindings
) ) {
// If any of the attributes with source "rich-text" is part of the bindings,
// has a source with `lockAttributesEditing`, disable it.
if (
blockTypeAttributes?.[ attribute ]?.source ===
'rich-text' &&
getBlockBindingsSource( args.source.name )
?.lockAttributesEditing
) {
shouldDisableEditing = true;
break;
}
}
}

return {
selectionStart: isSelected ? selectionStart.offset : undefined,
selectionEnd: isSelected ? selectionEnd.offset : undefined,
isSelected,
blockBindings,
getBlockBindingsSource,
shouldDisableEditing,
};
};
const {
selectionStart,
selectionEnd,
isSelected,
blockBindings,
getBlockBindingsSource,
} = useSelect( selector, [
clientId,
identifier,
originalIsSelected,
isBlockSelected,
] );
const { selectionStart, selectionEnd, isSelected, shouldDisableEditing } =
useSelect( selector, [
clientId,
identifier,
originalIsSelected,
isBlockSelected,
] );
const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
useSelect( blockEditorStore );
const { selectionChange } = useDispatch( blockEditorStore );
Expand Down Expand Up @@ -306,23 +323,6 @@ export function RichTextWrapper(
anchorRef.current?.focus();
}

let shouldDisableEditing = false;
if ( blockBindings ) {
const blockTypeAttributes = getBlockType( blockName ).attributes;
for ( const [ attribute, args ] of Object.entries( blockBindings ) ) {
// If any of the attributes with source "rich-text" is part of the bindings,
// has a source with `lockAttributesEditing`, disable it.
if (
blockTypeAttributes?.[ attribute ]?.source === 'rich-text' &&
getBlockBindingsSource( args.source.name )
?.lockAttributesEditing
) {
shouldDisableEditing = true;
break;
}
}
}

const TagName = tagName;
return (
<>
Expand Down
Loading