@wordpress/block-editor 8.4.0 → 8.5.2

package/src/layouts/flex.js

@@ -18,7 +18,12 @@ import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
 import { appendSelectors } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
 import useSetting from '../components/use-setting';
-import { BlockControls, JustifyContentControl } from '../components';
+import {
+	BlockControls,
+	JustifyContentControl,
+	BlockVerticalAlignmentControl,
+} from '../components';
+import { shouldSkipSerialization } from '../hooks/utils';
 
 // Used with the default, horizontal flex orientation.
 const justifyContentMap = {
@@ -35,6 +40,12 @@ const alignItemsMap = {
 	center: 'center',
 };
 
+const verticalAlignmentMap = {
+	top: 'flex-start',
+	center: 'center',
+	bottom: 'flex-end',
+};
+
 const flexWrapOptions = [ 'wrap', 'nowrap' ];
 
 export default {
@@ -76,6 +87,7 @@ export default {
 		if ( layoutBlockSupport?.allowSwitching ) {
 			return null;
 		}
+		const { allowVerticalAlignment = true } = layoutBlockSupport;
 		return (
 			<BlockControls group="block" __experimentalShareWithChildBlocks>
 				<FlexLayoutJustifyContentControl
@@ -83,25 +95,40 @@ export default {
 					onChange={ onChange }
 					isToolbar
 				/>
+				{ allowVerticalAlignment &&
+					layout?.orientation !== 'vertical' && (
+						<FlexLayoutVerticalAlignmentControl
+							layout={ layout }
+							onChange={ onChange }
+							isToolbar
+						/>
+					) }
 			</BlockControls>
 		);
 	},
-	save: function FlexLayoutStyle( { selector, layout, style } ) {
+	save: function FlexLayoutStyle( { selector, layout, style, blockName } ) {
 		const { orientation = 'horizontal' } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
+		// If a block's block.json skips serialization for spacing or spacing.blockGap,
+		// don't apply the user-defined value to the styles.
 		const blockGapValue =
-			getGapCSSValue( style?.spacing?.blockGap, '0.5em' ) ??
-			'var( --wp--style--block-gap, 0.5em )';
+			style?.spacing?.blockGap &&
+			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
+				? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )
+				: 'var( --wp--style--block-gap, 0.5em )';
 		const justifyContent =
 			justifyContentMap[ layout.justifyContent ] ||
 			justifyContentMap.left;
 		const flexWrap = flexWrapOptions.includes( layout.flexWrap )
 			? layout.flexWrap
 			: 'wrap';
+		const verticalAlignment =
+			verticalAlignmentMap[ layout.verticalAlignment ] ||
+			verticalAlignmentMap.center;
 		const rowOrientation = `
 		flex-direction: row;
-		align-items: center;
+		align-items: ${ verticalAlignment };
 		justify-content: ${ justifyContent };
 		`;
 		const alignItems =
@@ -135,6 +162,63 @@ export default {
 	},
 };
 
+function FlexLayoutVerticalAlignmentControl( {
+	layout,
+	onChange,
+	isToolbar = false,
+} ) {
+	const { verticalAlignment = verticalAlignmentMap.center } = layout;
+
+	const onVerticalAlignmentChange = ( value ) => {
+		onChange( {
+			...layout,
+			verticalAlignment: value,
+		} );
+	};
+	if ( isToolbar ) {
+		return (
+			<BlockVerticalAlignmentControl
+				onChange={ onVerticalAlignmentChange }
+				value={ verticalAlignment }
+			/>
+		);
+	}
+
+	const verticalAlignmentOptions = [
+		{
+			value: 'flex-start',
+			label: __( 'Align items top' ),
+		},
+		{
+			value: 'center',
+			label: __( 'Align items center' ),
+		},
+		{
+			value: 'flex-end',
+			label: __( 'Align items bottom' ),
+		},
+	];
+
+	return (
+		<fieldset className="block-editor-hooks__flex-layout-vertical-alignment-control">
+			<legend>{ __( 'Vertical alignment' ) }</legend>
+			<div>
+				{ verticalAlignmentOptions.map( ( value, icon, label ) => {
+					return (
+						<Button
+							key={ value }
+							label={ label }
+							icon={ icon }
+							isPressed={ verticalAlignment === value }
+							onClick={ () => onVerticalAlignmentChange( value ) }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
+	);
+}
+
 function FlexLayoutJustifyContentControl( {
 	layout,
 	onChange,

package/src/layouts/flow.js

@@ -14,7 +14,8 @@ import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
  */
 import useSetting from '../components/use-setting';
 import { appendSelectors } from './utils';
-import { getGapValueFromStyle } from '../hooks/gap';
+import { getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { shouldSkipSerialization } from '../hooks/utils';
 
 export default {
 	name: 'default',
@@ -106,15 +107,25 @@ export default {
 	toolBarControls: function DefaultLayoutToolbarControls() {
 		return null;
 	},
-	save: function DefaultLayoutStyle( { selector, layout = {}, style } ) {
+	save: function DefaultLayoutStyle( {
+		selector,
+		layout = {},
+		style,
+		blockName,
+	} ) {
 		const { contentSize, wideSize } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
-		const blockGapStyleValue = getGapValueFromStyle(
+		const blockGapStyleValue = getGapBoxControlValueFromStyle(
 			style?.spacing?.blockGap
 		);
+		// If a block's block.json skips serialization for spacing or
+		// spacing.blockGap, don't apply the user-defined value to the styles.
 		const blockGapValue =
-			blockGapStyleValue?.top ?? 'var( --wp--style--block-gap )';
+			blockGapStyleValue?.top &&
+			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
+				? blockGapStyleValue?.top
+				: 'var( --wp--style--block-gap )';
 
 		let output =
 			!! contentSize || !! wideSize

package/src/store/actions.js

@@ -22,6 +22,11 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { create, insert, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 
+/**
+ * Internal dependencies
+ */
+import { mapRichTextSettings } from './utils';
+
 /**
  * Action which will insert a default block insert action if there
  * are no other blocks at the root of the editor. This action should be used
@@ -100,6 +105,15 @@ export const validateBlocksToTemplate = ( blocks ) => ( {
  *                                 text value. See `wp.richText.create`.
  */
 
+/**
+ * A selection object.
+ *
+ * @typedef {Object} WPSelection
+ *
+ * @property {WPBlockSelection} start The selection start.
+ * @property {WPBlockSelection} end   The selection end.
+ */
+
 /* eslint-disable jsdoc/valid-types */
 /**
  * Returns an action object used in signalling that selection state should be
@@ -601,7 +615,7 @@ export const insertBlocks = (
  * @param {?string} rootClientId      Optional root client ID of block list on
  *                                    which to insert.
  * @param {?number} index             Index at which block should be inserted.
- * @param {Object}  __unstableOptions Wether or not to show an inserter button.
+ * @param {Object}  __unstableOptions Whether or not to show an inserter button.
  *
  * @return {Object} Action object.
  */
@@ -658,6 +672,313 @@ export const synchronizeTemplate = () => ( { select, dispatch } ) => {
 	dispatch.resetBlocks( updatedBlockList );
 };
 
+/**
+ * Delete the current selection.
+ *
+ * @param {boolean} isForward
+ */
+export const __unstableDeleteSelection = ( isForward ) => ( {
+	registry,
+	select,
+	dispatch,
+} ) => {
+	const selectionAnchor = select.getSelectionStart();
+	const selectionFocus = select.getSelectionEnd();
+
+	if ( selectionAnchor.clientId === selectionFocus.clientId ) return;
+
+	// It's not mergeable if there's no rich text selection.
+	if (
+		! selectionAnchor.attributeKey ||
+		! selectionFocus.attributeKey ||
+		typeof selectionAnchor.offset === 'undefined' ||
+		typeof selectionFocus.offset === 'undefined'
+	)
+		return false;
+
+	const anchorRootClientId = select.getBlockRootClientId(
+		selectionAnchor.clientId
+	);
+	const focusRootClientId = select.getBlockRootClientId(
+		selectionFocus.clientId
+	);
+
+	// It's not mergeable if the selection doesn't start and end in the same
+	// block list. Maybe in the future it should be allowed.
+	if ( anchorRootClientId !== focusRootClientId ) {
+		return;
+	}
+
+	const blockOrder = select.getBlockOrder( anchorRootClientId );
+	const anchorIndex = blockOrder.indexOf( selectionAnchor.clientId );
+	const focusIndex = blockOrder.indexOf( selectionFocus.clientId );
+
+	// Reassign selection start and end based on order.
+	let selectionStart, selectionEnd;
+
+	if ( anchorIndex > focusIndex ) {
+		selectionStart = selectionFocus;
+		selectionEnd = selectionAnchor;
+	} else {
+		selectionStart = selectionAnchor;
+		selectionEnd = selectionFocus;
+	}
+
+	const targetSelection = isForward ? selectionEnd : selectionStart;
+	const targetBlock = select.getBlock( targetSelection.clientId );
+	const targetBlockType = getBlockType( targetBlock.name );
+
+	if ( ! targetBlockType.merge ) {
+		return;
+	}
+
+	const selectionA = selectionStart;
+	const selectionB = selectionEnd;
+
+	const blockA = select.getBlock( selectionA.clientId );
+	const blockAType = getBlockType( blockA.name );
+
+	const blockB = select.getBlock( selectionB.clientId );
+	const blockBType = getBlockType( blockB.name );
+
+	const htmlA = blockA.attributes[ selectionA.attributeKey ];
+	const htmlB = blockB.attributes[ selectionB.attributeKey ];
+
+	const attributeDefinitionA =
+		blockAType.attributes[ selectionA.attributeKey ];
+	const attributeDefinitionB =
+		blockBType.attributes[ selectionB.attributeKey ];
+
+	let valueA = create( {
+		html: htmlA,
+		...mapRichTextSettings( attributeDefinitionA ),
+	} );
+	let valueB = create( {
+		html: htmlB,
+		...mapRichTextSettings( attributeDefinitionB ),
+	} );
+
+	// A robust way to retain selection position through various transforms
+	// is to insert a special character at the position and then recover it.
+	const START_OF_SELECTED_AREA = '\u0086';
+
+	valueA = remove( valueA, selectionA.offset, valueA.text.length );
+	valueB = insert( valueB, START_OF_SELECTED_AREA, 0, selectionB.offset );
+
+	// Clone the blocks so we don't manipulate the original.
+	const cloneA = cloneBlock( blockA, {
+		[ selectionA.attributeKey ]: toHTMLString( {
+			value: valueA,
+			...mapRichTextSettings( attributeDefinitionA ),
+		} ),
+	} );
+	const cloneB = cloneBlock( blockB, {
+		[ selectionB.attributeKey ]: toHTMLString( {
+			value: valueB,
+			...mapRichTextSettings( attributeDefinitionB ),
+		} ),
+	} );
+
+	const followingBlock = isForward ? cloneA : cloneB;
+
+	// We can only merge blocks with similar types
+	// thus, we transform the block to merge first
+	const blocksWithTheSameType =
+		blockA.name === blockB.name
+			? [ followingBlock ]
+			: switchToBlockType( followingBlock, targetBlockType.name );
+
+	// If the block types can not match, do nothing
+	if ( ! blocksWithTheSameType || ! blocksWithTheSameType.length ) {
+		return;
+	}
+
+	let updatedAttributes;
+
+	if ( isForward ) {
+		const blockToMerge = blocksWithTheSameType.pop();
+		updatedAttributes = targetBlockType.merge(
+			blockToMerge.attributes,
+			cloneB.attributes
+		);
+	} else {
+		const blockToMerge = blocksWithTheSameType.shift();
+		updatedAttributes = targetBlockType.merge(
+			cloneA.attributes,
+			blockToMerge.attributes
+		);
+	}
+
+	const newAttributeKey = findKey(
+		updatedAttributes,
+		( v ) =>
+			typeof v === 'string' && v.indexOf( START_OF_SELECTED_AREA ) !== -1
+	);
+
+	const convertedHtml = updatedAttributes[ newAttributeKey ];
+	const convertedValue = create( {
+		html: convertedHtml,
+		...mapRichTextSettings( targetBlockType.attributes[ newAttributeKey ] ),
+	} );
+	const newOffset = convertedValue.text.indexOf( START_OF_SELECTED_AREA );
+	const newValue = remove( convertedValue, newOffset, newOffset + 1 );
+	const newHtml = toHTMLString( {
+		value: newValue,
+		...mapRichTextSettings( targetBlockType.attributes[ newAttributeKey ] ),
+	} );
+
+	updatedAttributes[ newAttributeKey ] = newHtml;
+
+	const selectedBlockClientIds = select.getSelectedBlockClientIds();
+	const replacement = [
+		...( isForward ? blocksWithTheSameType : [] ),
+		{
+			// Preserve the original client ID.
+			...targetBlock,
+			attributes: {
+				...targetBlock.attributes,
+				...updatedAttributes,
+			},
+		},
+		...( isForward ? [] : blocksWithTheSameType ),
+	];
+
+	registry.batch( () => {
+		dispatch.selectionChange(
+			targetBlock.clientId,
+			newAttributeKey,
+			newOffset,
+			newOffset
+		);
+
+		dispatch.replaceBlocks(
+			selectedBlockClientIds,
+			replacement,
+			0, // If we don't pass the `indexToSelect` it will default to the last block.
+			select.getSelectedBlocksInitialCaretPosition()
+		);
+	} );
+};
+
+/**
+ * Split the current selection.
+ */
+export const __unstableSplitSelection = () => ( { select, dispatch } ) => {
+	const selectionAnchor = select.getSelectionStart();
+	const selectionFocus = select.getSelectionEnd();
+
+	if ( selectionAnchor.clientId === selectionFocus.clientId ) return;
+
+	// Can't split if the selection is not set.
+	if (
+		! selectionAnchor.attributeKey ||
+		! selectionFocus.attributeKey ||
+		typeof selectionAnchor.offset === 'undefined' ||
+		typeof selectionFocus.offset === 'undefined'
+	)
+		return;
+
+	const anchorRootClientId = select.getBlockRootClientId(
+		selectionAnchor.clientId
+	);
+	const focusRootClientId = select.getBlockRootClientId(
+		selectionFocus.clientId
+	);
+
+	// It's not splittable if the selection doesn't start and end in the same
+	// block list. Maybe in the future it should be allowed.
+	if ( anchorRootClientId !== focusRootClientId ) {
+		return;
+	}
+
+	const blockOrder = select.getBlockOrder( anchorRootClientId );
+	const anchorIndex = blockOrder.indexOf( selectionAnchor.clientId );
+	const focusIndex = blockOrder.indexOf( selectionFocus.clientId );
+
+	// Reassign selection start and end based on order.
+	let selectionStart, selectionEnd;
+
+	if ( anchorIndex > focusIndex ) {
+		selectionStart = selectionFocus;
+		selectionEnd = selectionAnchor;
+	} else {
+		selectionStart = selectionAnchor;
+		selectionEnd = selectionFocus;
+	}
+
+	const selectionA = selectionStart;
+	const selectionB = selectionEnd;
+
+	const blockA = select.getBlock( selectionA.clientId );
+	const blockAType = getBlockType( blockA.name );
+
+	const blockB = select.getBlock( selectionB.clientId );
+	const blockBType = getBlockType( blockB.name );
+
+	const htmlA = blockA.attributes[ selectionA.attributeKey ];
+	const htmlB = blockB.attributes[ selectionB.attributeKey ];
+
+	const attributeDefinitionA =
+		blockAType.attributes[ selectionA.attributeKey ];
+	const attributeDefinitionB =
+		blockBType.attributes[ selectionB.attributeKey ];
+
+	let valueA = create( {
+		html: htmlA,
+		...mapRichTextSettings( attributeDefinitionA ),
+	} );
+	let valueB = create( {
+		html: htmlB,
+		...mapRichTextSettings( attributeDefinitionB ),
+	} );
+
+	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 ),
+					} ),
+				},
+			},
+			createBlock( getDefaultBlockName() ),
+			{
+				// 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()
+	);
+};
+
+/**
+ * Expand the selection to cover the entire blocks, removing partial selection.
+ */
+export const __unstableExpandSelection = () => ( { select, dispatch } ) => {
+	const selectionAnchor = select.getSelectionStart();
+	const selectionFocus = select.getSelectionEnd();
+	dispatch.selectionChange( {
+		start: { clientId: selectionAnchor.clientId },
+		end: { clientId: selectionFocus.clientId },
+	} );
+};
+
 /**
  * Action that merges two blocks.
  *
@@ -719,17 +1040,10 @@ export const mergeBlocks = ( firstBlockClientId, secondBlockClientId ) => ( {
 	if ( canRestoreTextSelection ) {
 		const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
 		const html = selectedBlock.attributes[ attributeKey ];
-		const {
-			multiline: multilineTag,
-			__unstableMultilineWrapperTags: multilineWrapperTags,
-			__unstablePreserveWhiteSpace: preserveWhiteSpace,
-		} = attributeDefinition;
 		const value = insert(
 			create( {
 				html,
-				multilineTag,
-				multilineWrapperTags,
-				preserveWhiteSpace,
+				...mapRichTextSettings( attributeDefinition ),
 			} ),
 			START_OF_SELECTED_AREA,
 			offset,
@@ -738,8 +1052,7 @@ export const mergeBlocks = ( firstBlockClientId, secondBlockClientId ) => ( {
 
 		selectedBlock.attributes[ attributeKey ] = toHTMLString( {
 			value,
-			multilineTag,
-			preserveWhiteSpace,
+			...mapRichTextSettings( attributeDefinition ),
 		} );
 	}
 
@@ -769,23 +1082,15 @@ export const mergeBlocks = ( firstBlockClientId, secondBlockClientId ) => ( {
 				v.indexOf( START_OF_SELECTED_AREA ) !== -1
 		);
 		const convertedHtml = updatedAttributes[ newAttributeKey ];
-		const {
-			multiline: multilineTag,
-			__unstableMultilineWrapperTags: multilineWrapperTags,
-			__unstablePreserveWhiteSpace: preserveWhiteSpace,
-		} = blockAType.attributes[ newAttributeKey ];
 		const convertedValue = create( {
 			html: convertedHtml,
-			multilineTag,
-			multilineWrapperTags,
-			preserveWhiteSpace,
+			...mapRichTextSettings( blockAType.attributes[ newAttributeKey ] ),
 		} );
 		const newOffset = convertedValue.text.indexOf( START_OF_SELECTED_AREA );
 		const newValue = remove( convertedValue, newOffset, newOffset + 1 );
 		const newHtml = toHTMLString( {
 			value: newValue,
-			multilineTag,
-			preserveWhiteSpace,
+			...mapRichTextSettings( blockAType.attributes[ newAttributeKey ] ),
 		} );
 
 		updatedAttributes[ newAttributeKey ] = newHtml;
@@ -978,10 +1283,10 @@ export function exitFormattedText() {
 /**
  * Action that changes the position of the user caret.
  *
- * @param {string} clientId     The selected block client ID.
- * @param {string} attributeKey The selected block attribute key.
- * @param {number} startOffset  The start offset.
- * @param {number} endOffset    The end offset.
+ * @param {string|WPSelection} clientId     The selected block client ID.
+ * @param {string}             attributeKey The selected block attribute key.
+ * @param {number}             startOffset  The start offset.
+ * @param {number}             endOffset    The end offset.
  *
  * @return {Object} Action object.
  */
@@ -991,13 +1296,17 @@ export function selectionChange(
 	startOffset,
 	endOffset
 ) {
-	return {
-		type: 'SELECTION_CHANGE',
-		clientId,
-		attributeKey,
-		startOffset,
-		endOffset,
-	};
+	if ( typeof clientId === 'string' ) {
+		return {
+			type: 'SELECTION_CHANGE',
+			clientId,
+			attributeKey,
+			startOffset,
+			endOffset,
+		};
+	}
+
+	return { type: 'SELECTION_CHANGE', ...clientId };
 }
 
 /**

package/src/store/defaults.js

@@ -23,12 +23,13 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       keepCaretInsideBlock                   Whether caret should move between blocks in edit mode
  * @property {string}        bodyPlaceholder                        Empty post placeholder
  * @property {string}        titlePlaceholder                       Empty title placeholder
+ * @property {boolean}       canLockBlocks                          Whether the user can manage Block Lock state
  * @property {boolean}       codeEditingEnabled                     Whether or not the user can switch to the code editor
+ * @property {boolean}       generateAnchors                        Enable/Disable auto anchor generation for Heading blocks
  * @property {boolean}       __experimentalCanUserUseUnfilteredHTML Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
  * @property {boolean}       __experimentalBlockDirectory           Whether the user has enabled the Block Directory
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
- * @property {boolean}       __experimentalGenerateAnchors          Enable/Disable auto anchor generation for Heading blocks
  * @property {boolean}       __unstableGalleryWithImageBlocks       Whether the user has enabled the refactored gallery block which uses InnerBlocks
  */
 export const SETTINGS_DEFAULTS = {
@@ -151,14 +152,18 @@ export const SETTINGS_DEFAULTS = {
 	// List of allowed mime types and file extensions.
 	allowedMimeTypes: null,
 
+	// Allows to disable block locking interface.
+	canLockBlocks: true,
+
 	__experimentalCanUserUseUnfilteredHTML: false,
 	__experimentalBlockDirectory: false,
 	__mobileEnablePageTemplates: false,
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
 	__experimentalSpotlightEntityBlocks: [],
-	__experimentalGenerateAnchors: false,
 	__unstableGalleryWithImageBlocks: false,
+
+	generateAnchors: false,
 	// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
 	// The setting is only kept for backward compatibility purposes.
 	gradients: [