@wordpress/block-editor 12.6.0 → 12.8.0

package/src/hooks/border.js

@@ -377,13 +377,14 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent(
 			borderBottomColor: borderBottomColor || borderColorValue,
 			borderLeftColor: borderLeftColor || borderColorValue,
 		};
+		const cleanedExtraStyles = cleanEmptyObject( extraStyles ) || {};
 
 		let wrapperProps = props.wrapperProps;
 		wrapperProps = {
 			...props.wrapperProps,
 			style: {
 				...props.wrapperProps?.style,
-				...extraStyles,
+				...cleanedExtraStyles,
 			},
 		};
 

package/src/hooks/custom-fields.js

@@ -0,0 +1,139 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { PanelBody, TextControl } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { hasBlockSupport } from '@wordpress/blocks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { InspectorControls } from '../components';
+import { useBlockEditingMode } from '../components/block-editing-mode';
+
+/**
+ * Filters registered block settings, extending attributes to include `connections`.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+function addAttribute( settings ) {
+	if ( hasBlockSupport( settings, '__experimentalConnections', true ) ) {
+		// Gracefully handle if settings.attributes.connections is undefined.
+		settings.attributes = {
+			...settings.attributes,
+			connections: {
+				type: 'object',
+			},
+		};
+	}
+
+	return settings;
+}
+
+/**
+ * Override the default edit UI to include a new block inspector control for
+ * assigning a connection to blocks that has support for connections.
+ * Currently, only the `core/paragraph` block is supported and there is only a relation
+ * between paragraph content and a custom field.
+ *
+ * @param {WPComponent} BlockEdit Original component.
+ *
+ * @return {WPComponent} Wrapped component.
+ */
+const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
+		const blockEditingMode = useBlockEditingMode();
+		const hasCustomFieldsSupport = hasBlockSupport(
+			props.name,
+			'__experimentalConnections',
+			false
+		);
+
+		// Check if the current block is a paragraph or image block.
+		// Currently, only these two blocks are supported.
+		if ( ! [ 'core/paragraph', 'core/image' ].includes( props.name ) ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		// If the block is a paragraph or image block, we need to know which
+		// attribute to use for the connection. Only the `content` attribute
+		// of the paragraph block and the `url` attribute of the image block are supported.
+		let attributeName;
+		if ( props.name === 'core/paragraph' ) attributeName = 'content';
+		if ( props.name === 'core/image' ) attributeName = 'url';
+
+		if ( hasCustomFieldsSupport && props.isSelected ) {
+			return (
+				<>
+					<BlockEdit { ...props } />
+					{ blockEditingMode === 'default' && (
+						<InspectorControls>
+							<PanelBody
+								title={ __( 'Connections' ) }
+								initialOpen={ true }
+							>
+								<TextControl
+									__nextHasNoMarginBottom
+									autoComplete="off"
+									label={ __( 'Custom field meta_key' ) }
+									value={
+										props.attributes?.connections
+											?.attributes?.[ attributeName ]
+											?.value || ''
+									}
+									onChange={ ( nextValue ) => {
+										if ( nextValue === '' ) {
+											props.setAttributes( {
+												connections: undefined,
+												[ attributeName ]: undefined,
+												placeholder: undefined,
+											} );
+										} else {
+											props.setAttributes( {
+												connections: {
+													attributes: {
+														// The attributeName will be either `content` or `url`.
+														[ attributeName ]: {
+															// Source will be variable, could be post_meta, user_meta, term_meta, etc.
+															// Could even be a custom source like a social media attribute.
+															source: 'meta_fields',
+															value: nextValue,
+														},
+													},
+												},
+												[ attributeName ]: undefined,
+												placeholder: sprintf(
+													'This content will be replaced on the frontend by the value of "%s" custom field.',
+													nextValue
+												),
+											} );
+										}
+									} }
+								/>
+							</PanelBody>
+						</InspectorControls>
+					) }
+				</>
+			);
+		}
+
+		return <BlockEdit { ...props } />;
+	};
+}, 'withInspectorControl' );
+
+if ( window.__experimentalConnections ) {
+	addFilter(
+		'blocks.registerBlockType',
+		'core/connections/attribute',
+		addAttribute
+	);
+	addFilter(
+		'editor.BlockEdit',
+		'core/connections/with-inspector-control',
+		withInspectorControl
+	);
+}

package/src/hooks/index.js

@@ -21,6 +21,7 @@ import './content-lock-ui';
 import './metadata';
 import './metadata-name';
 import './behaviors';
+import './custom-fields';
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';

package/src/hooks/layout.js

@@ -31,6 +31,7 @@ import { getLayoutType, getLayoutTypes } from '../layouts';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
 import { kebabCase } from '../utils/object';
+import { useBlockSettings } from './utils';
 
 const layoutBlockSupportKey = 'layout';
 
@@ -69,9 +70,12 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 	if ( LAYOUT_DEFINITIONS[ usedLayout?.type || 'default' ]?.className ) {
 		const baseClassName =
 			LAYOUT_DEFINITIONS[ usedLayout?.type || 'default' ]?.className;
-		const compoundClassName = `wp-block-${ blockName
-			.split( '/' )
-			.pop() }-${ baseClassName }`;
+		const splitBlockName = blockName.split( '/' );
+		const fullBlockName =
+			splitBlockName[ 0 ] === 'core'
+				? splitBlockName.pop()
+				: splitBlockName.join( '-' );
+		const compoundClassName = `wp-block-${ fullBlockName }-${ baseClassName }`;
 		layoutClassnames.push( baseClassName, compoundClassName );
 	}
 
@@ -133,6 +137,11 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 }
 
 function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
+	const settings = useBlockSettings( blockName );
+	const {
+		layout: { allowEditing: allowEditingSetting },
+	} = settings;
+
 	const { layout } = attributes;
 	const defaultThemeLayout = useSetting( 'layout' );
 	const { themeSupportsLayout } = useSelect( ( select ) => {
@@ -150,7 +159,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	);
 	const {
 		allowSwitching,
-		allowEditing = true,
+		allowEditing = allowEditingSetting ?? true,
 		allowInheriting = true,
 		default: defaultBlockLayout,
 	} = layoutBlockSupport;

package/src/hooks/style.js

@@ -44,8 +44,8 @@ const styleSupportKeys = [
 	SPACING_SUPPORT_KEY,
 ];
 
-const hasStyleSupport = ( blockType ) =>
-	styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
+const hasStyleSupport = ( nameOrType ) =>
+	styleSupportKeys.some( ( key ) => hasBlockSupport( nameOrType, key ) );
 
 /**
  * Returns the inline styles to add depending on the style object
@@ -347,6 +347,10 @@ export function addEditProps( settings ) {
  */
 export const withBlockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
+		if ( ! hasStyleSupport( props.name ) ) {
+			return <BlockEdit key="edit" { ...props } />;
+		}
+
 		const shouldDisplayControls = useDisplayBlockControls();
 		const blockEditingMode = useBlockEditingMode();
 
@@ -360,7 +364,7 @@ export const withBlockControls = createHigherOrderComponent(
 						<DimensionsPanel { ...props } />
 					</>
 				) }
-				<BlockEdit { ...props } />
+				<BlockEdit key="edit" { ...props } />
 			</>
 		);
 	},

package/src/private-apis.js

@@ -12,7 +12,6 @@ import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
 import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';
 import { cleanEmptyObject } from './hooks/utils';
-import { useBlockEditingMode } from './components/block-editing-mode';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
@@ -23,6 +22,7 @@ import {
 	default as ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
 } from './components/inserter/reusable-block-rename-hint';
+import { usesContextKey } from './components/rich-text/format-edit';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -39,7 +39,6 @@ lock( privateApis, {
 	BlockInfo,
 	useShouldContextualToolbarShow,
 	cleanEmptyObject,
-	useBlockEditingMode,
 	BlockQuickNavigation,
 	LayoutStyle,
 	BlockRemovalWarningModal,
@@ -49,4 +48,5 @@ lock( privateApis, {
 	ResolutionTool,
 	ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
+	usesContextKey,
 } );

package/src/store/actions.js

@@ -12,6 +12,7 @@ import {
 	hasBlockSupport,
 	switchToBlockType,
 	synchronizeBlocksWithTemplate,
+	getBlockSupport,
 } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -948,36 +949,30 @@ export const __unstableSplitSelection =
 		valueA = remove( valueA, selectionA.offset, valueA.text.length );
 		valueB = remove( valueB, 0, selectionB.offset );
 
-		dispatch.replaceBlocks(
-			select.getSelectedBlockClientIds(),
-			[
-				{
-					// Preserve the original client ID.
-					...blockA,
-					attributes: {
-						...blockA.attributes,
-						[ selectionA.attributeKey ]: toHTMLString( {
-							value: valueA,
-							...mapRichTextSettings( attributeDefinitionA ),
-						} ),
-					},
+		dispatch.replaceBlocks( select.getSelectedBlockClientIds(), [
+			{
+				// Preserve the original client ID.
+				...blockA,
+				attributes: {
+					...blockA.attributes,
+					[ selectionA.attributeKey ]: toHTMLString( {
+						value: valueA,
+						...mapRichTextSettings( attributeDefinitionA ),
+					} ),
 				},
-				createBlock( getDefaultBlockName() ),
-				{
-					// Preserve the original client ID.
-					...blockB,
-					attributes: {
-						...blockB.attributes,
-						[ selectionB.attributeKey ]: toHTMLString( {
-							value: valueB,
-							...mapRichTextSettings( attributeDefinitionB ),
-						} ),
-					},
+			},
+			{
+				// Preserve the original client ID.
+				...blockB,
+				attributes: {
+					...blockB.attributes,
+					[ selectionB.attributeKey ]: toHTMLString( {
+						value: valueB,
+						...mapRichTextSettings( attributeDefinitionB ),
+					} ),
 				},
-			],
-			1, // If we don't pass the `indexToSelect` it will default to the last block.
-			select.getSelectedBlocksInitialCaretPosition()
-		);
+			},
+		] );
 	};
 
 /**
@@ -1012,9 +1007,17 @@ export const mergeBlocks =
 
 		if ( ! blockAType ) return;
 
+		if (
+			! blockAType.merge &&
+			! getBlockSupport( blockA.name, '__experimentalOnMerge' )
+		) {
+			dispatch.selectBlock( blockA.clientId );
+			return;
+		}
+
 		const blockB = select.getBlock( clientIdB );
 
-		if ( blockAType && ! blockAType.merge ) {
+		if ( ! blockAType.merge ) {
 			// If there's no merge function defined, attempt merging inner
 			// blocks.
 			const blocksWithTheSameType = switchToBlockType(
@@ -1816,7 +1819,6 @@ export function __unstableSetTemporarilyEditingAsBlocks(
  *                                                                                                   the report url for the media item. It accepts the `InserterMediaItem` as an argument.
  * @property {boolean}                                                [isExternalResource]           If the media category is an external resource, this should be set to true.
  *                                                                                                   This is used to avoid making a request to the external resource when the user
- *
  */
 export const registerInserterMediaCategory =
 	( category ) =>
@@ -1884,3 +1886,42 @@ export const registerInserterMediaCategory =
 			},
 		} );
 	};
+
+/**
+ * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
+ */
+
+/**
+ * Sets the block editing mode for a given block.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {string}           clientId The block client ID, or `''` for the root container.
+ * @param {BlockEditingMode} mode     The block editing mode. One of `'disabled'`,
+ *                                    `'contentOnly'`, or `'default'`.
+ *
+ * @return {Object} Action object.
+ */
+export function setBlockEditingMode( clientId = '', mode ) {
+	return {
+		type: 'SET_BLOCK_EDITING_MODE',
+		clientId,
+		mode,
+	};
+}
+
+/**
+ * Clears the block editing mode for a given block.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {string} clientId The block client ID, or `''` for the root container.
+ *
+ * @return {Object} Action object.
+ */
+export function unsetBlockEditingMode( clientId = '' ) {
+	return {
+		type: 'UNSET_BLOCK_EDITING_MODE',
+		clientId,
+	};
+}

package/src/store/private-actions.js

@@ -73,45 +73,6 @@ export function showBlockInterface() {
 	};
 }
 
-/**
- * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
- */
-
-/**
- * Sets the block editing mode for a given block.
- *
- * @see useBlockEditingMode
- *
- * @param {string}           clientId The block client ID, or `''` for the root container.
- * @param {BlockEditingMode} mode     The block editing mode. One of `'disabled'`,
- *                                    `'contentOnly'`, or `'default'`.
- *
- * @return {Object} Action object.
- */
-export function setBlockEditingMode( clientId = '', mode ) {
-	return {
-		type: 'SET_BLOCK_EDITING_MODE',
-		clientId,
-		mode,
-	};
-}
-
-/**
- * Clears the block editing mode for a given block.
- *
- * @see useBlockEditingMode
- *
- * @param {string} clientId The block client ID, or `''` for the root container.
- *
- * @return {Object} Action object.
- */
-export function unsetBlockEditingMode( clientId = '' ) {
-	return {
-		type: 'UNSET_BLOCK_EDITING_MODE',
-		clientId,
-	};
-}
-
 /**
  * Yields action objects used in signalling that the blocks corresponding to
  * the set of specified client IDs are to be removed.

package/src/store/private-selectors.js

@@ -3,21 +3,13 @@
  */
 import createSelector from 'rememo';
 
-/**
- * WordPress dependencies
- */
-import { select } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
-
 /**
  * Internal dependencies
  */
 import {
-	getBlockRootClientId,
-	getTemplateLock,
-	getBlockName,
 	getBlockOrder,
 	getBlockParents,
+	getBlockEditingMode,
 } from './selectors';
 
 /**
@@ -41,64 +33,6 @@ export function getLastInsertedBlocksClientIds( state ) {
 	return state?.lastBlockInserted?.clientIds;
 }
 
-/**
- * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
- */
-
-/**
- * Returns the block editing mode for a given block.
- *
- * The mode can be one of three options:
- *
- * - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be
- *   selected.
- * - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the
- *   toolbar, the block movers, block settings.
- * - `'default'`: Allows editing the block as normal.
- *
- * Blocks can set a mode using the `useBlockEditingMode` hook.
- *
- * The mode is inherited by all of the block's inner blocks, unless they have
- * their own mode.
- *
- * A template lock can also set a mode. If the template lock is `'contentOnly'`,
- * the block's mode is overridden to `'contentOnly'` if the block has a content
- * role attribute, or `'disabled'` otherwise.
- *
- * @see useBlockEditingMode
- *
- * @param {Object} state    Global application state.
- * @param {string} clientId The block client ID, or `''` for the root container.
- *
- * @return {BlockEditingMode} The block editing mode. One of `'disabled'`,
- *                            `'contentOnly'`, or `'default'`.
- */
-export function getBlockEditingMode( state, clientId = '' ) {
-	if ( state.blockEditingModes.has( clientId ) ) {
-		return state.blockEditingModes.get( clientId );
-	}
-	if ( ! clientId ) {
-		return 'default';
-	}
-	const rootClientId = getBlockRootClientId( state, clientId );
-	const templateLock = getTemplateLock( state, rootClientId );
-	if ( templateLock === 'contentOnly' ) {
-		const name = getBlockName( state, clientId );
-		// TODO: Terrible hack! We're calling the global select() function
-		// here instead of using createRegistrySelector(). The problem with
-		// using createRegistrySelector() is that then the public
-		// block-editor selectors (e.g. canInsertBlockTypeUnmemoized) can't
-		// call this private block-editor selector due to a bug in
-		// @wordpress/data. See
-		// https://github.com/WordPress/gutenberg/pull/50985.
-		const isContent =
-			select( blocksStore ).__experimentalHasContentRoleAttribute( name );
-		return isContent ? 'contentOnly' : 'disabled';
-	}
-	const parentMode = getBlockEditingMode( state, rootClientId );
-	return parentMode === 'contentOnly' ? 'default' : parentMode;
-}
-
 /**
  * Returns true if the block with the given client ID and all of its descendants
  * have an editing mode of 'disabled', or false otherwise.