@wordpress/block-editor 12.7.0 → 12.8.0

package/src/components/rich-text/use-format-types.js

@@ -66,21 +66,21 @@ export function useFormatTypes( {
 } ) {
 	const allFormatTypes = useSelect( formatTypesSelector, [] );
 	const formatTypes = useMemo( () => {
-		return allFormatTypes.filter( ( { name, tagName } ) => {
+		return allFormatTypes.filter( ( { name, interactive, tagName } ) => {
 			if ( allowedFormats && ! allowedFormats.includes( name ) ) {
 				return false;
 			}
 
 			if (
 				withoutInteractiveFormatting &&
-				interactiveContentTags.has( tagName )
+				( interactive || interactiveContentTags.has( tagName ) )
 			) {
 				return false;
 			}
 
 			return true;
 		} );
-	}, [ allFormatTypes, allowedFormats, interactiveContentTags ] );
+	}, [ allFormatTypes, allowedFormats, withoutInteractiveFormatting ] );
 	const keyedSelected = useSelect(
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {

package/src/components/rich-text/use-paste-handler.js

@@ -129,29 +129,6 @@ export function usePasteHandler( props ) {
 			}
 
 			const files = [ ...getFilesFromDataTransfer( clipboardData ) ];
-			const isInternal = clipboardData.getData( 'rich-text' ) === 'true';
-
-			// If the data comes from a rich text instance, we can directly use it
-			// without filtering the data. The filters are only meant for externally
-			// pasted content and remove inline styles.
-			if ( isInternal ) {
-				const pastedMultilineTag =
-					clipboardData.getData( 'rich-text-multi-line-tag' ) ||
-					undefined;
-				let pastedValue = create( {
-					html,
-					multilineTag: pastedMultilineTag,
-					multilineWrapperTags:
-						pastedMultilineTag === 'li'
-							? [ 'ul', 'ol' ]
-							: undefined,
-					preserveWhiteSpace,
-				} );
-				pastedValue = adjustLines( pastedValue, !! multilineTag );
-				addActiveFormats( pastedValue, value.activeFormats );
-				onChange( insert( value, pastedValue ) );
-				return;
-			}
 
 			if ( pastePlainText ) {
 				onChange( insert( value, create( { text: plainText } ) ) );
@@ -238,6 +215,10 @@ export function usePasteHandler( props ) {
 				mode,
 				tagName,
 				preserveWhiteSpace,
+				// If the data comes from a rich text instance, we can directly
+				// use it without filtering the data. The filters are only meant
+				// for externally pasted content and remove inline styles.
+				disableFilters: !! clipboardData.getData( 'rich-text' ),
 			} );
 
 			if ( typeof content === 'string' ) {

package/src/components/use-block-commands/index.js

@@ -0,0 +1,284 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	hasBlockSupport,
+	store as blocksStore,
+	switchToBlockType,
+	isTemplatePart,
+} from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCommandLoader } from '@wordpress/commands';
+import {
+	copy,
+	edit as remove,
+	create as add,
+	group,
+	ungroup,
+	moveTo as move,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export const useTransformCommands = () => {
+	const { clientIds } = useSelect( ( select ) => {
+		const { getSelectedBlockClientIds } = select( blockEditorStore );
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+
+		return {
+			clientIds: selectedBlockClientIds,
+		};
+	}, [] );
+	const blocks = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlocksByClientId( clientIds ),
+		[ clientIds ]
+	);
+	const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
+	const { possibleBlockTransformations, canRemove } = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockTransformItems,
+				canRemoveBlocks,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId(
+				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
+			);
+			return {
+				possibleBlockTransformations: getBlockTransformItems(
+					blocks,
+					rootClientId
+				),
+				canRemove: canRemoveBlocks( clientIds, rootClientId ),
+			};
+		},
+		[ clientIds, blocks ]
+	);
+
+	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
+
+	function selectForMultipleBlocks( insertedBlocks ) {
+		if ( insertedBlocks.length > 1 ) {
+			multiSelect(
+				insertedBlocks[ 0 ].clientId,
+				insertedBlocks[ insertedBlocks.length - 1 ].clientId
+			);
+		}
+	}
+
+	// Simple block tranformation based on the `Block Transforms` API.
+	function onBlockTransform( name ) {
+		const newBlocks = switchToBlockType( blocks, name );
+		replaceBlocks( clientIds, newBlocks );
+		selectForMultipleBlocks( newBlocks );
+	}
+
+	/**
+	 * The `isTemplate` check is a stopgap solution here.
+	 * Ideally, the Transforms API should handle this
+	 * by allowing to exclude blocks from wildcard transformations.
+	 */
+	const hasPossibleBlockTransformations =
+		!! possibleBlockTransformations.length && canRemove && ! isTemplate;
+
+	if (
+		! clientIds ||
+		clientIds.length < 1 ||
+		! hasPossibleBlockTransformations
+	) {
+		return { isLoading: false, commands: [] };
+	}
+
+	const commands = possibleBlockTransformations.map( ( transformation ) => {
+		const { name, title, icon } = transformation;
+		return {
+			name: 'core/block-editor/transform-to-' + name.replace( '/', '-' ),
+			// translators: %s: block title/name.
+			label: sprintf( __( 'Transform to %s' ), title ),
+			icon: icon.src,
+			callback: ( { close } ) => {
+				onBlockTransform( name );
+				close();
+			},
+		};
+	} );
+
+	return { isLoading: false, commands };
+};
+
+const useActionsCommands = () => {
+	const { clientIds } = useSelect( ( select ) => {
+		const { getSelectedBlockClientIds } = select( blockEditorStore );
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+
+		return {
+			clientIds: selectedBlockClientIds,
+		};
+	}, [] );
+	const {
+		canInsertBlockType,
+		getBlockRootClientId,
+		getBlocksByClientId,
+		canMoveBlocks,
+		canRemoveBlocks,
+	} = useSelect( blockEditorStore );
+	const { getDefaultBlockName, getGroupingBlockName } =
+		useSelect( blocksStore );
+
+	const blocks = getBlocksByClientId( clientIds );
+	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+
+	const canDuplicate = blocks.every( ( block ) => {
+		return (
+			!! block &&
+			hasBlockSupport( block.name, 'multiple', true ) &&
+			canInsertBlockType( block.name, rootClientId )
+		);
+	} );
+
+	const canInsertDefaultBlock = canInsertBlockType(
+		getDefaultBlockName(),
+		rootClientId
+	);
+
+	const canMove = canMoveBlocks( clientIds, rootClientId );
+	const canRemove = canRemoveBlocks( clientIds, rootClientId );
+
+	const {
+		removeBlocks,
+		replaceBlocks,
+		duplicateBlocks,
+		insertAfterBlock,
+		insertBeforeBlock,
+		setBlockMovingClientId,
+		setNavigationMode,
+		selectBlock,
+	} = useDispatch( blockEditorStore );
+
+	const onDuplicate = () => {
+		if ( ! canDuplicate ) {
+			return;
+		}
+		return duplicateBlocks( clientIds, true );
+	};
+	const onRemove = () => {
+		if ( ! canRemove ) {
+			return;
+		}
+		return removeBlocks( clientIds, true );
+	};
+	const onAddBefore = () => {
+		if ( ! canInsertDefaultBlock ) {
+			return;
+		}
+		const clientId = Array.isArray( clientIds ) ? clientIds[ 0 ] : clientId;
+		insertBeforeBlock( clientId );
+	};
+	const onAddAfter = () => {
+		if ( ! canInsertDefaultBlock ) {
+			return;
+		}
+		const clientId = Array.isArray( clientIds )
+			? clientIds[ clientIds.length - 1 ]
+			: clientId;
+		insertAfterBlock( clientId );
+	};
+	const onMoveTo = () => {
+		if ( ! canMove ) {
+			return;
+		}
+		setNavigationMode( true );
+		selectBlock( clientIds[ 0 ] );
+		setBlockMovingClientId( clientIds[ 0 ] );
+	};
+	const onGroup = () => {
+		if ( ! blocks.length ) {
+			return;
+		}
+
+		const groupingBlockName = getGroupingBlockName();
+
+		// Activate the `transform` on `core/group` which does the conversion.
+		const newBlocks = switchToBlockType( blocks, groupingBlockName );
+
+		if ( ! newBlocks ) {
+			return;
+		}
+		replaceBlocks( clientIds, newBlocks );
+	};
+	const onUngroup = () => {
+		if ( ! blocks.length ) {
+			return;
+		}
+
+		const innerBlocks = blocks[ 0 ].innerBlocks;
+
+		if ( ! innerBlocks.length ) {
+			return;
+		}
+
+		replaceBlocks( clientIds, innerBlocks );
+	};
+
+	if ( ! clientIds || clientIds.length < 1 ) {
+		return { isLoading: false, commands: [] };
+	}
+
+	const icons = {
+		ungroup,
+		group,
+		move,
+		add,
+		remove,
+		duplicate: copy,
+	};
+
+	const commands = [
+		onUngroup,
+		onGroup,
+		onMoveTo,
+		onAddAfter,
+		onAddBefore,
+		onRemove,
+		onDuplicate,
+	].map( ( callback ) => {
+		const action = callback.name
+			.replace( 'on', '' )
+			.replace( /([a-z])([A-Z])/g, '$1 $2' );
+
+		return {
+			name: 'core/block-editor/action-' + callback.name,
+			// translators: %s: type of the command.
+			label: action,
+			icon: icons[
+				callback.name
+					.replace( 'on', '' )
+					.match( /[A-Z]{1}[a-z]*/ )
+					.toString()
+					.toLowerCase()
+			],
+			callback: ( { close } ) => {
+				callback();
+				close();
+			},
+		};
+	} );
+
+	return { isLoading: false, commands };
+};
+
+export const useBlockCommands = () => {
+	useCommandLoader( {
+		name: 'core/block-editor/blockTransforms',
+		hook: useTransformCommands,
+	} );
+	useCommandLoader( {
+		name: 'core/block-editor/blockActions',
+		hook: useActionsCommands,
+	} );
+};

package/src/components/use-block-drop-zone/index.js

@@ -19,7 +19,6 @@ import {
 	isPointContainedByRect,
 } from '../../utils/math';
 import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 /** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */
@@ -155,7 +154,7 @@ export default function useBlockDropZone( {
 				__unstableIsWithinBlockOverlay,
 				__unstableHasActiveBlockOverlayActive,
 				getBlockEditingMode,
-			} = unlock( select( blockEditorStore ) );
+			} = select( blockEditorStore );
 			const blockEditingMode = getBlockEditingMode( targetRootClientId );
 			return (
 				blockEditingMode !== 'default' ||

package/src/components/use-setting/README.md

@@ -0,0 +1,39 @@
+## Use Setting
+
+`useSetting` is a hook that will retrive the setting for the block instance that's in use. 
+
+It does the lookup of the setting in the following order:
+
+1. Third parties can provide the settings for the block using the filter `blockEditor.useSetting.before`.
+2. If no third parties have provided this setting, then it looks up in the block instance hierachy starting from the current block and working its way upwards to its ancestors.
+3. If that doesn't prove to be successful in getting a value, then it falls back to the settings from the block editor store.
+4. If none of the above steps prove to be successful, then it's likely to be a deprecated setting and the deprecated setting is used instead.
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+
+## Development guidelines
+
+### Usage
+
+This will fetch the default color palette based on the block instance.
+
+```jsx
+import { useSetting } from '@wordpress/block-editor';
+
+const defaultColorPalette = useSetting( 'color.palette.default' );
+```
+
+Refer [here](https://github.com/WordPress/gutenberg/blob/HEAD/docs/how-to-guides/curating-the-editor-experience.md?plain=1#L330) in order to understand how the filter mentioned above `blockEditor.useSetting.before` can be used.
+
+### Props
+
+This hooks accepts the following props.
+
+#### `path`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+The path to the setting that is to be used for a block. Ex: `typography.fontSizes`

package/src/components/writing-flow/use-drag-selection.js

@@ -96,7 +96,11 @@ export default function useDragSelection() {
 					return;
 				}
 
-				anchorElement = ownerDocument.activeElement;
+				// Do not rely on the active element because it may change after
+				// the mouse leaves for the first time. See
+				// https://github.com/WordPress/gutenberg/issues/48747.
+				anchorElement = target;
+
 				startMultiSelect();
 
 				// `onSelectionStart` is called after `mousedown` and

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/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';
@@ -40,7 +39,6 @@ lock( privateApis, {
 	BlockInfo,
 	useShouldContextualToolbarShow,
 	cleanEmptyObject,
-	useBlockEditingMode,
 	BlockQuickNavigation,
 	LayoutStyle,
 	BlockRemovalWarningModal,