@wordpress/block-editor 12.19.4 → 12.19.5

package/build-style/style-rtl.css

@@ -97,6 +97,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -122,6 +123,20 @@
   margin-top: 0;
 }
 
+.block-editor-block-bindings-toolbar-indicator {
+  display: inline-flex;
+  align-items: center;
+  height: 48px;
+  padding: 6px;
+}
+.block-editor-block-bindings-toolbar-indicator svg g {
+  stroke: var(--wp-bound-block-color);
+  fill: transparent;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 iframe[name=editor-canvas] {
   width: 100%;
   height: 100%;
@@ -2670,6 +2685,14 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
+.block-editor-list-view-block-select-button__bindings svg g {
+  stroke: var(--wp-bound-block-color);
+  fill: transparent;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }

package/build-style/style.css

@@ -97,6 +97,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -122,6 +123,20 @@
   margin-top: 0;
 }
 
+.block-editor-block-bindings-toolbar-indicator {
+  display: inline-flex;
+  align-items: center;
+  height: 48px;
+  padding: 6px;
+}
+.block-editor-block-bindings-toolbar-indicator svg g {
+  stroke: var(--wp-bound-block-color);
+  fill: transparent;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 iframe[name=editor-canvas] {
   width: 100%;
   height: 100%;
@@ -2671,6 +2686,14 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
+.block-editor-list-view-block-select-button__bindings svg g {
+  stroke: var(--wp-bound-block-color);
+  fill: transparent;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.19.4",
+	"version": "12.19.5",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,9 +38,9 @@
 		"@wordpress/a11y": "^3.51.1",
 		"@wordpress/api-fetch": "^6.48.1",
 		"@wordpress/blob": "^3.51.1",
-		"@wordpress/blocks": "^12.28.4",
-		"@wordpress/commands": "^0.22.3",
-		"@wordpress/components": "^26.0.3",
+		"@wordpress/blocks": "^12.28.5",
+		"@wordpress/commands": "^0.22.4",
+		"@wordpress/components": "^26.0.4",
 		"@wordpress/compose": "^6.28.1",
 		"@wordpress/data": "^9.21.1",
 		"@wordpress/date": "^4.51.1",
@@ -51,14 +51,14 @@
 		"@wordpress/hooks": "^3.51.1",
 		"@wordpress/html-entities": "^3.51.1",
 		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.2",
+		"@wordpress/icons": "^9.42.3",
 		"@wordpress/is-shallow-equal": "^4.51.1",
 		"@wordpress/keyboard-shortcuts": "^4.28.1",
 		"@wordpress/keycodes": "^3.51.1",
 		"@wordpress/notices": "^4.19.1",
-		"@wordpress/preferences": "^3.28.3",
+		"@wordpress/preferences": "^3.28.4",
 		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/rich-text": "^6.28.2",
+		"@wordpress/rich-text": "^6.28.3",
 		"@wordpress/style-engine": "^1.34.1",
 		"@wordpress/token-list": "^2.51.1",
 		"@wordpress/url": "^3.52.1",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "864c1c553cb284def3bd5c907998da45f5c143ea"
+	"gitHead": "4927ea437069f9aed12f696df294a79bd8e12fd5"
 }

package/src/components/block-actions/index.js

@@ -20,42 +20,55 @@ export default function BlockActions( {
 	children,
 	__experimentalUpdateSelection: updateSelection,
 } ) {
-	const {
-		canInsertBlockType,
-		getBlockRootClientId,
-		getBlocksByClientId,
-		canMoveBlocks,
-		canRemoveBlocks,
-	} = useSelect( blockEditorStore );
 	const { getDefaultBlockName, getGroupingBlockName } =
 		useSelect( blocksStore );
-
-	const blocks = getBlocksByClientId( clientIds );
-	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-
-	const canCopyStyles = blocks.every( ( block ) => {
-		return (
-			!! block &&
-			( hasBlockSupport( block.name, 'color' ) ||
-				hasBlockSupport( block.name, 'typography' ) )
-		);
-	} );
-
-	const canDuplicate = blocks.every( ( block ) => {
-		return (
-			!! block &&
-			hasBlockSupport( block.name, 'multiple', true ) &&
-			canInsertBlockType( block.name, rootClientId )
-		);
-	} );
-
-	const canInsertDefaultBlock = canInsertBlockType(
-		getDefaultBlockName(),
-		rootClientId
+	const selected = useSelect(
+		( select ) => {
+			const {
+				canInsertBlockType,
+				getBlockRootClientId,
+				getBlocksByClientId,
+				getDirectInsertBlock,
+				canMoveBlocks,
+				canRemoveBlocks,
+			} = select( blockEditorStore );
+
+			const blocks = getBlocksByClientId( clientIds );
+			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+			const canInsertDefaultBlock = canInsertBlockType(
+				getDefaultBlockName(),
+				rootClientId
+			);
+			const directInsertBlock = rootClientId
+				? getDirectInsertBlock( rootClientId )
+				: null;
+
+			return {
+				canMove: canMoveBlocks( clientIds, rootClientId ),
+				canRemove: canRemoveBlocks( clientIds, rootClientId ),
+				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
+				canCopyStyles: blocks.every( ( block ) => {
+					return (
+						!! block &&
+						( hasBlockSupport( block.name, 'color' ) ||
+							hasBlockSupport( block.name, 'typography' ) )
+					);
+				} ),
+				canDuplicate: blocks.every( ( block ) => {
+					return (
+						!! block &&
+						hasBlockSupport( block.name, 'multiple', true ) &&
+						canInsertBlockType( block.name, rootClientId )
+					);
+				} ),
+			};
+		},
+		[ clientIds, getDefaultBlockName ]
 	);
+	const { getBlocksByClientId, getBlocks } = useSelect( blockEditorStore );
 
-	const canMove = canMoveBlocks( clientIds, rootClientId );
-	const canRemove = canRemoveBlocks( clientIds, rootClientId );
+	const { canMove, canRemove, canInsertBlock, canCopyStyles, canDuplicate } =
+		selected;
 
 	const {
 		removeBlocks,
@@ -75,11 +88,9 @@ export default function BlockActions( {
 	return children( {
 		canCopyStyles,
 		canDuplicate,
-		canInsertDefaultBlock,
+		canInsertBlock,
 		canMove,
 		canRemove,
-		rootClientId,
-		blocks,
 		onDuplicate() {
 			return duplicateBlocks( clientIds, updateSelection );
 		},
@@ -104,14 +115,17 @@ export default function BlockActions( {
 			setBlockMovingClientId( clientIds[ 0 ] );
 		},
 		onGroup() {
-			if ( ! blocks.length ) {
+			if ( ! clientIds.length ) {
 				return;
 			}
 
 			const groupingBlockName = getGroupingBlockName();
 
 			// Activate the `transform` on `core/group` which does the conversion.
-			const newBlocks = switchToBlockType( blocks, groupingBlockName );
+			const newBlocks = switchToBlockType(
+				getBlocksByClientId( clientIds ),
+				groupingBlockName
+			);
 
 			if ( ! newBlocks ) {
 				return;
@@ -119,12 +133,11 @@ export default function BlockActions( {
 			replaceBlocks( clientIds, newBlocks );
 		},
 		onUngroup() {
-			if ( ! blocks.length ) {
+			if ( ! clientIds.length ) {
 				return;
 			}
 
-			const innerBlocks = blocks[ 0 ].innerBlocks;
-
+			const innerBlocks = getBlocks( clientIds[ 0 ] );
 			if ( ! innerBlocks.length ) {
 				return;
 			}
@@ -132,16 +145,13 @@ export default function BlockActions( {
 			replaceBlocks( clientIds, innerBlocks );
 		},
 		onCopy() {
-			const selectedBlockClientIds = blocks.map(
-				( { clientId } ) => clientId
-			);
-			if ( blocks.length === 1 ) {
-				flashBlock( selectedBlockClientIds[ 0 ] );
+			if ( clientIds.length === 1 ) {
+				flashBlock( clientIds[ 0 ] );
 			}
-			notifyCopy( 'copy', selectedBlockClientIds );
+			notifyCopy( 'copy', clientIds );
 		},
 		async onPasteStyles() {
-			await pasteStyles( blocks );
+			await pasteStyles( getBlocksByClientId( clientIds ) );
 		},
 	} );
 }

package/src/components/block-bindings-toolbar-indicator/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarItem, ToolbarGroup, Icon } from '@wordpress/components';
+import { connection } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
+
+export default function BlockBindingsToolbarIndicator() {
+	return (
+		<ToolbarGroup>
+			<ToolbarItem
+				as={ 'div' }
+				aria-label={ _x( 'Connected', 'block toolbar button label' ) }
+				className="block-editor-block-bindings-toolbar-indicator"
+			>
+				<Icon icon={ connection } size={ 24 } />
+			</ToolbarItem>
+		</ToolbarGroup>
+	);
+}

package/src/components/block-bindings-toolbar-indicator/style.scss

@@ -0,0 +1,14 @@
+.block-editor-block-bindings-toolbar-indicator {
+	display: inline-flex;
+	align-items: center;
+	height: 48px;
+	padding: 6px;
+
+	svg g {
+		stroke: var(--wp-bound-block-color);
+		fill: transparent;
+		stroke-width: 1.5;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+}

package/src/components/block-list/use-block-props/index.js

@@ -19,13 +19,17 @@ import useMovingAnimation from '../../use-moving-animation';
 import { PrivateBlockContext } from '../private-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
-import { useBlockEditContext } from '../../block-edit/context';
+import {
+	blockBindingsKey,
+	useBlockEditContext,
+} from '../../block-edit/context';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
+import { canBindBlock } from '../../../hooks/use-bindings-attributes';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -123,6 +127,12 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	] );
 
 	const blockEditContext = useBlockEditContext();
+	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
+	const bindingsStyle =
+		hasBlockBindings && canBindBlock( name )
+			? { '--wp-admin-theme-color': 'var(--wp-bound-block-color)' }
+			: {};
+
 	// Ensures it warns only inside the `edit` implementation for the block.
 	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {
 		warning(
@@ -168,7 +178,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			wrapperProps.className,
 			defaultClassName
 		),
-		style: { ...wrapperProps.style, ...props.style },
+		style: { ...wrapperProps.style, ...props.style, ...bindingsStyle },
 	};
 }
 

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -22,7 +22,7 @@ import { store as blockEditorStore } from '../../../store';
 export function useEventHandlers( { clientId, isSelected } ) {
 	const { getBlockRootClientId, getBlockIndex } =
 		useSelect( blockEditorStore );
-	const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore );
+	const { insertAfterBlock, removeBlock } = useDispatch( blockEditorStore );
 
 	return useRefEffect(
 		( node ) => {
@@ -57,11 +57,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 				event.preventDefault();
 
 				if ( keyCode === ENTER ) {
-					insertDefaultBlock(
-						{},
-						getBlockRootClientId( clientId ),
-						getBlockIndex( clientId ) + 1
-					);
+					insertAfterBlock( clientId );
 				} else {
 					removeBlock( clientId );
 				}
@@ -90,7 +86,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			isSelected,
 			getBlockRootClientId,
 			getBlockIndex,
-			insertDefaultBlock,
+			insertAfterBlock,
 			removeBlock,
 		]
 	);

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -39,8 +39,12 @@ const POPOVER_PROPS = {
 	placement: 'bottom-start',
 };
 
-function CopyMenuItem( { blocks, onCopy, label } ) {
-	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
+function CopyMenuItem( { clientIds, onCopy, label } ) {
+	const { getBlocksByClientId } = useSelect( blockEditorStore );
+	const ref = useCopyToClipboard(
+		() => serialize( getBlocksByClientId( clientIds ) ),
+		onCopy
+	);
 	const copyMenuItemLabel = label ? label : __( 'Copy' );
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
@@ -239,7 +243,7 @@ export function BlockSettingsDropdown( {
 			{ ( {
 				canCopyStyles,
 				canDuplicate,
-				canInsertDefaultBlock,
+				canInsertBlock,
 				canMove,
 				canRemove,
 				onDuplicate,
@@ -249,7 +253,6 @@ export function BlockSettingsDropdown( {
 				onCopy,
 				onPasteStyles,
 				onMoveTo,
-				blocks,
 			} ) => (
 				<DropdownMenu
 					icon={ moreVertical }
@@ -286,7 +289,7 @@ export function BlockSettingsDropdown( {
 									'core/block-editor/insert-after',
 									event
 								) &&
-								canInsertDefaultBlock
+								canInsertBlock
 							) {
 								event.preventDefault();
 								setOpenedBlockSettingsMenu( undefined );
@@ -296,7 +299,7 @@ export function BlockSettingsDropdown( {
 									'core/block-editor/insert-before',
 									event
 								) &&
-								canInsertDefaultBlock
+								canInsertBlock
 							) {
 								event.preventDefault();
 								setOpenedBlockSettingsMenu( undefined );
@@ -327,7 +330,7 @@ export function BlockSettingsDropdown( {
 									/>
 								) }
 								<CopyMenuItem
-									blocks={ blocks }
+									clientIds={ clientIds }
 									onCopy={ onCopy }
 								/>
 								{ canDuplicate && (
@@ -342,7 +345,7 @@ export function BlockSettingsDropdown( {
 										{ __( 'Duplicate' ) }
 									</MenuItem>
 								) }
-								{ canInsertDefaultBlock && (
+								{ canInsertBlock && (
 									<>
 										<MenuItem
 											onClick={ pipe(
@@ -368,7 +371,7 @@ export function BlockSettingsDropdown( {
 							{ canCopyStyles && (
 								<MenuGroup>
 									<CopyMenuItem
-										blocks={ blocks }
+										clientIds={ clientIds }
 										onCopy={ onCopy }
 										label={ __( 'Copy styles' ) }
 									/>

package/src/components/block-toolbar/index.js

@@ -35,6 +35,8 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
+import BlockBindingsIndicator from '../block-bindings-toolbar-indicator';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
 
 /**
  * Renders the block toolbar.
@@ -60,8 +62,10 @@ export function PrivateBlockToolbar( {
 		blockClientIds,
 		isDefaultEditingMode,
 		blockType,
+		blockName,
 		shouldShowVisualToolbar,
 		showParentSelector,
+		isUsingBindings,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -71,6 +75,7 @@ export function PrivateBlockToolbar( {
 			isBlockValid,
 			getBlockRootClientId,
 			getBlockEditingMode,
+			getBlockAttributes,
 		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -81,20 +86,21 @@ export function PrivateBlockToolbar( {
 		const parentBlockType = getBlockType( parentBlockName );
 		const _isDefaultEditingMode =
 			getBlockEditingMode( selectedBlockClientId ) === 'default';
+		const _blockName = getBlockName( selectedBlockClientId );
 		const isValid = selectedBlockClientIds.every( ( id ) =>
 			isBlockValid( id )
 		);
 		const isVisual = selectedBlockClientIds.every(
 			( id ) => getBlockMode( id ) === 'visual'
 		);
+		const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId )
+			?.metadata?.bindings;
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
 			isDefaultEditingMode: _isDefaultEditingMode,
-			blockType:
-				selectedBlockClientId &&
-				getBlockType( getBlockName( selectedBlockClientId ) ),
-
+			blockName: _blockName,
+			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
 			rootClientId: blockRootClientId,
 			showParentSelector:
@@ -107,6 +113,7 @@ export function PrivateBlockToolbar( {
 				) &&
 				selectedBlockClientIds.length === 1 &&
 				_isDefaultEditingMode,
+			isUsingBindings: _isUsingBindings,
 		};
 	}, [] );
 
@@ -165,6 +172,9 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
+				{ isUsingBindings && canBindBlock( blockName ) && (
+					<BlockBindingsIndicator />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					isDefaultEditingMode && (
 						<div

package/src/components/list-view/block-select-button.js

@@ -14,7 +14,12 @@ import {
 	Tooltip,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
+import {
+	Icon,
+	connection,
+	lockSmall as lock,
+	pinSmall,
+} from '@wordpress/icons';
 import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
@@ -32,11 +37,12 @@ import { useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import useListViewImages from './use-list-view-images';
 import { useListViewContext } from './context';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
 
 function ListViewBlockSelectButton(
 	{
 		className,
-		block: { clientId },
+		block: { clientId, name: blockName },
 		onClick,
 		onContextMenu,
 		onMouseDown,
@@ -66,6 +72,7 @@ function ListViewBlockSelectButton(
 		getBlockRootClientId,
 		getBlockOrder,
 		getBlocksByClientId,
+		getBlockAttributes,
 		canRemoveBlocks,
 	} = useSelect( blockEditorStore );
 	const { duplicateBlocks, multiSelect, removeBlocks } =
@@ -75,6 +82,8 @@ function ListViewBlockSelectButton(
 	const images = useListViewImages( { clientId, isExpanded } );
 	const { rootClientId } = useListViewContext();
 
+	const isConnected = getBlockAttributes( clientId )?.metadata?.bindings;
+
 	const positionLabel = blockInformation?.positionLabel
 		? sprintf(
 				// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
@@ -278,6 +287,11 @@ function ListViewBlockSelectButton(
 							</Truncate>
 						</span>
 					) }
+					{ isConnected && canBindBlock( blockName ) && (
+						<span className="block-editor-list-view-block-select-button__bindings">
+							<Icon icon={ connection } />
+						</span>
+					) }
 					{ positionLabel && isSticky && (
 						<Tooltip text={ positionLabel }>
 							<Icon icon={ pinSmall } />

package/src/components/list-view/style.scss

@@ -557,3 +557,11 @@ $block-navigation-max-indent: 8;
 .list-view-appender__description {
 	display: none;
 }
+
+.block-editor-list-view-block-select-button__bindings svg g {
+	stroke: var(--wp-bound-block-color);
+	fill: transparent;
+	stroke-width: 1.5;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}

package/src/components/list-view/use-clipboard-handler.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -15,6 +15,7 @@ import { getPasteBlocks, setClipboardBlocks } from '../writing-flow/utils';
 // This hook borrows from useClipboardHandler in ../writing-flow/use-clipboard-handler.js
 // and adds behaviour for the list view, while skipping partial selection.
 export default function useClipboardHandler( { selectBlock } ) {
+	const registry = useRegistry();
 	const {
 		getBlockOrder,
 		getBlockRootClientId,
@@ -106,7 +107,7 @@ export default function useClipboardHandler( { selectBlock } ) {
 
 				notifyCopy( event.type, selectedBlockClientIds );
 				const blocks = getBlocksByClientId( selectedBlockClientIds );
-				setClipboardBlocks( event, blocks );
+				setClipboardBlocks( event, blocks, registry );
 			}
 
 			if ( event.type === 'cut' ) {

package/src/components/rich-text/index.js

@@ -47,7 +47,7 @@ import { getAllowedFormats } from './utils';
 import { Content } from './content';
 import { withDeprecations } from './with-deprecations';
 import { unlock } from '../../lock-unlock';
-import { BLOCK_BINDINGS_ALLOWED_BLOCKS } from '../../hooks/use-bindings-attributes';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -161,7 +161,7 @@ export function RichTextWrapper(
 		( select ) => {
 			// Disable Rich Text editing if block bindings specify that.
 			let _disableBoundBlocks = false;
-			if ( blockBindings && blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS ) {
+			if ( blockBindings && canBindBlock( blockName ) ) {
 				const blockTypeAttributes =
 					getBlockType( blockName ).attributes;
 				const { getBlockBindingsSource } = unlock(

package/src/components/url-popover/index.js

@@ -92,12 +92,12 @@ const URLPopover = forwardRef(
 							/>
 						) }
 					</div>
-					{ showSettings && (
-						<div className="block-editor-url-popover__row block-editor-url-popover__settings">
-							{ renderSettings() }
-						</div>
-					) }
 				</div>
+				{ showSettings && (
+					<div className="block-editor-url-popover__settings">
+						{ renderSettings() }
+					</div>
+				) }
 				{ additionalControls && ! showSettings && (
 					<div className="block-editor-url-popover__additional-controls">
 						{ additionalControls }