@wordpress/block-editor 8.0.8 → 8.0.12-next.33ec3857e2.0

package/src/hooks/border-width.js

@@ -5,13 +5,14 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { cleanEmptyObject } from './utils';
+import { removeBorderAttribute } from './border';
 import useSetting from '../components/use-setting';
 
 const MIN_BORDER_WIDTH = 0;
@@ -31,25 +32,12 @@ export const BorderWidthEdit = ( props ) => {
 
 	const { width, color: customBorderColor, style: borderStyle } =
 		style?.border || {};
+
+	// Used to temporarily track previous border color & style selections to be
+	// able to restore them when border width changes from zero value.
 	const [ styleSelection, setStyleSelection ] = useState();
 	const [ colorSelection, setColorSelection ] = useState();
-
-	// Temporarily track previous border color & style selections to be able to
-	// restore them when border width changes from zero value.
-	useEffect( () => {
-		if ( borderStyle !== 'none' ) {
-			setStyleSelection( borderStyle );
-		}
-	}, [ borderStyle ] );
-
-	useEffect( () => {
-		if ( borderColor || customBorderColor ) {
-			setColorSelection( {
-				name: !! borderColor ? borderColor : undefined,
-				color: !! customBorderColor ? customBorderColor : undefined,
-			} );
-		}
-	}, [ borderColor, customBorderColor ] );
+	const [ customColorSelection, setCustomColorSelection ] = useState();
 
 	const onChange = ( newWidth ) => {
 		let newStyle = {
@@ -64,28 +52,39 @@ export const BorderWidthEdit = ( props ) => {
 		let borderPaletteColor = borderColor;
 
 		const hasZeroWidth = parseFloat( newWidth ) === 0;
+		const hadPreviousZeroWidth = parseFloat( width ) === 0;
 
 		// Setting the border width explicitly to zero will also set the
 		// border style to `none` and clear border color attributes.
-		if ( hasZeroWidth ) {
+		if ( hasZeroWidth && ! hadPreviousZeroWidth ) {
+			// Before clearing color and style selections, keep track of
+			// the current selections so they can be restored when the width
+			// changes to a non-zero value.
+			setColorSelection( borderColor );
+			setCustomColorSelection( customBorderColor );
+			setStyleSelection( borderStyle );
+
+			// Clear style and color attributes.
 			borderPaletteColor = undefined;
 			newStyle.border.color = undefined;
 			newStyle.border.style = 'none';
 		}
 
-		// Restore previous border style selection if width is now not zero and
-		// border style was 'none'. This is to support changes to the UI which
-		// change the border style UI to a segmented control without a "none"
-		// option.
-		if ( ! hasZeroWidth && borderStyle === 'none' ) {
-			newStyle.border.style = styleSelection;
-		}
-
-		// Restore previous border color selection if width is no longer zero
-		// and current border color is undefined.
-		if ( ! hasZeroWidth && borderColor === undefined ) {
-			borderPaletteColor = colorSelection?.name;
-			newStyle.border.color = colorSelection?.color;
+		if ( ! hasZeroWidth && hadPreviousZeroWidth ) {
+			// Restore previous border style selection if width is now not zero and
+			// border style was 'none'. This is to support changes to the UI which
+			// change the border style UI to a segmented control without a "none"
+			// option.
+			if ( borderStyle === 'none' ) {
+				newStyle.border.style = styleSelection;
+			}
+
+			// Restore previous border color selection if width is no longer zero
+			// and current border color is undefined.
+			if ( borderColor === undefined ) {
+				borderPaletteColor = colorSelection;
+				newStyle.border.color = customColorSelection;
+			}
 		}
 
 		// If width was reset, clean out undefined styles.
@@ -113,3 +112,28 @@ export const BorderWidthEdit = ( props ) => {
 		/>
 	);
 };
+
+/**
+ * Checks if there is a current value in the border width block support
+ * attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a border width value set.
+ */
+export function hasBorderWidthValue( props ) {
+	return !! props.attributes.style?.border?.width;
+}
+
+/**
+ * Resets the border width block support attribute. This can be used when
+ * disabling the border width support control for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetBorderWidth( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+	setAttributes( { style: removeBorderAttribute( style, 'width' ) } );
+}

package/src/hooks/border.js

@@ -2,23 +2,41 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { PanelBody } from '@wordpress/components';
+import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import {
+	BorderColorEdit,
+	hasBorderColorValue,
+	resetBorderColor,
+} from './border-color';
+import {
+	BorderRadiusEdit,
+	hasBorderRadiusValue,
+	resetBorderRadius,
+} from './border-radius';
+import {
+	BorderStyleEdit,
+	hasBorderStyleValue,
+	resetBorderStyle,
+} from './border-style';
+import {
+	BorderWidthEdit,
+	hasBorderWidthValue,
+	resetBorderWidth,
+} from './border-width';
 import InspectorControls from '../components/inspector-controls';
 import useSetting from '../components/use-setting';
-import { BorderColorEdit } from './border-color';
-import { BorderRadiusEdit } from './border-radius';
-import { BorderStyleEdit } from './border-style';
-import { BorderWidthEdit } from './border-width';
+import { cleanEmptyObject } from './utils';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 
 export function BorderPanel( props ) {
+	const { clientId } = props;
 	const isDisabled = useIsBorderDisabled( props );
 	const isSupported = hasBorderSupport( props.name );
 
@@ -39,22 +57,80 @@ export function BorderPanel( props ) {
 		return null;
 	}
 
+	const defaultBorderControls = getBlockSupport( props.name, [
+		BORDER_SUPPORT_KEY,
+		'__experimentalDefaultControls',
+	] );
+
+	const createResetAllFilter = (
+		borderAttribute,
+		topLevelAttributes = {}
+	) => ( newAttributes ) => ( {
+		...newAttributes,
+		...topLevelAttributes,
+		style: {
+			...newAttributes.style,
+			border: {
+				...newAttributes.style?.border,
+				[ borderAttribute ]: undefined,
+			},
+		},
+	} );
+
 	return (
-		<InspectorControls>
-			<PanelBody
-				className="block-editor-hooks__border-controls"
-				title={ __( 'Border' ) }
-				initialOpen={ false }
-			>
-				{ ( isWidthSupported || isStyleSupported ) && (
-					<div className="block-editor-hooks__border-controls-row">
-						{ isWidthSupported && <BorderWidthEdit { ...props } /> }
-						{ isStyleSupported && <BorderStyleEdit { ...props } /> }
-					</div>
-				) }
-				{ isColorSupported && <BorderColorEdit { ...props } /> }
-				{ isRadiusSupported && <BorderRadiusEdit { ...props } /> }
-			</PanelBody>
+		<InspectorControls __experimentalGroup="border">
+			{ isWidthSupported && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasBorderWidthValue( props ) }
+					label={ __( 'Width' ) }
+					onDeselect={ () => resetBorderWidth( props ) }
+					isShownByDefault={ defaultBorderControls?.width }
+					resetAllFilter={ createResetAllFilter( 'width' ) }
+					panelId={ clientId }
+				>
+					<BorderWidthEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ isStyleSupported && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasBorderStyleValue( props ) }
+					label={ __( 'Style' ) }
+					onDeselect={ () => resetBorderStyle( props ) }
+					isShownByDefault={ defaultBorderControls?.style }
+					resetAllFilter={ createResetAllFilter( 'style' ) }
+					panelId={ clientId }
+				>
+					<BorderStyleEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ isColorSupported && (
+				<ToolsPanelItem
+					hasValue={ () => hasBorderColorValue( props ) }
+					label={ __( 'Color' ) }
+					onDeselect={ () => resetBorderColor( props ) }
+					isShownByDefault={ defaultBorderControls?.color }
+					resetAllFilter={ createResetAllFilter( 'color', {
+						borderColor: undefined,
+					} ) }
+					panelId={ clientId }
+				>
+					<BorderColorEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ isRadiusSupported && (
+				<ToolsPanelItem
+					hasValue={ () => hasBorderRadiusValue( props ) }
+					label={ __( 'Radius' ) }
+					onDeselect={ () => resetBorderRadius( props ) }
+					isShownByDefault={ defaultBorderControls?.radius }
+					resetAllFilter={ createResetAllFilter( 'radius' ) }
+					panelId={ clientId }
+				>
+					<BorderRadiusEdit { ...props } />
+				</ToolsPanelItem>
+			) }
 		</InspectorControls>
 	);
 }
@@ -118,3 +194,22 @@ const useIsBorderDisabled = () => {
 
 	return configs.every( Boolean );
 };
+
+/**
+ * Returns a new style object where the specified border attribute has been
+ * removed.
+ *
+ * @param {Object} style     Styles from block attributes.
+ * @param {string} attribute The border style attribute to clear.
+ *
+ * @return {Object} Style object with the specified attribute removed.
+ */
+export function removeBorderAttribute( style, attribute ) {
+	return cleanEmptyObject( {
+		...style,
+		border: {
+			...style?.border,
+			[ attribute ]: undefined,
+		},
+	} );
+}

package/src/hooks/border.scss

@@ -1,19 +1,5 @@
-.block-editor-hooks__border-controls {
-	.block-editor-hooks__border-controls-row {
-		display: flex;
-		justify-content: space-between;
-
-		> * {
-			width: calc(50% - #{ $grid-unit-10 });
-		}
-	}
-
-	.components-unit-control-wrapper {
-		margin-bottom: $grid-unit-30;
-
-		&:last-child {
-			margin-bottom: $grid-unit-10;
-		}
+.border-block-support-panel {
+	.single-column {
+		grid-column: span 1;
 	}
 }
-

package/src/hooks/dimensions.scss

@@ -0,0 +1,5 @@
+.dimensions-block-support-panel {
+	.single-column {
+		grid-column: span 1;
+	}
+}

package/src/hooks/letter-spacing.js

@@ -45,7 +45,7 @@ export function LetterSpacingEdit( props ) {
 		<LetterSpacingControl
 			value={ style?.typography?.letterSpacing }
 			onChange={ onChange }
-			__unstableInputWidth={ false }
+			__unstableInputWidth={ '100%' }
 		/>
 	);
 }

package/src/hooks/typography.js

@@ -218,7 +218,7 @@ export function TypographyPanel( props ) {
 				<ToolsPanelItem
 					className="single-column"
 					hasValue={ () => hasLetterSpacingValue( props ) }
-					label={ __( 'Letter-spacing' ) }
+					label={ __( 'Letter spacing' ) }
 					onDeselect={ () => resetLetterSpacing( props ) }
 					isShownByDefault={ defaultControls?.letterSpacing }
 					resetAllFilter={ createResetAllFilter( 'letterSpacing' ) }

package/src/store/actions.js

@@ -555,8 +555,7 @@ export const insertBlocks = (
 		meta = initialPosition;
 		initialPosition = 0;
 		deprecated( "meta argument in wp.data.dispatch('core/block-editor')", {
-			since: '10.1',
-			plugin: 'Gutenberg',
+			since: '5.8',
 			hint: 'The meta argument is now the 6th argument of the function',
 		} );
 	}

package/src/store/defaults.js

@@ -234,4 +234,6 @@ export const SETTINGS_DEFAULTS = {
 			slug: 'midnight',
 		},
 	],
+
+	__unstableResolvedAssets: { styles: [], scripts: [] },
 };

package/src/store/reducer.js

@@ -14,7 +14,6 @@ import {
 	isEmpty,
 	identity,
 	omitBy,
-	pickBy,
 } from 'lodash';
 
 /**
@@ -122,48 +121,6 @@ function getFlattenedBlockAttributes( blocks ) {
 	return flattenBlocks( blocks, ( block ) => block.attributes );
 }
 
-/**
- * Given a block order map object, returns *all* of the block client IDs that are
- * a descendant of the given root client ID.
- *
- * Calling this with `rootClientId` set to `''` results in a list of client IDs
- * that are in the post. That is, it excludes blocks like fetched reusable
- * blocks which are stored into state but not visible. It also excludes
- * InnerBlocks controllers, like template parts.
- *
- * It is important to exclude the full inner block controller and not just the
- * inner blocks because in many cases, we need to persist the previous value of
- * an inner block controller. To do so, it must be excluded from the list of
- * client IDs which are considered to be part of the top-level entity.
- *
- * @param {Object}  blocksOrder           Object that maps block client IDs to a list of
- *                                        nested block client IDs.
- * @param {?string} rootClientId          The root client ID to search. Defaults to ''.
- * @param {?Object} controlledInnerBlocks The InnerBlocks controller state.
- *
- * @return {Array} List of descendant client IDs.
- */
-function getNestedBlockClientIds(
-	blocksOrder,
-	rootClientId = '',
-	controlledInnerBlocks = {}
-) {
-	return reduce(
-		blocksOrder[ rootClientId ],
-		( result, clientId ) => {
-			if ( !! controlledInnerBlocks[ clientId ] ) {
-				return result;
-			}
-			return [
-				...result,
-				clientId,
-				...getNestedBlockClientIds( blocksOrder, clientId ),
-			];
-		},
-		[]
-	);
-}
-
 /**
  * Returns an object against which it is safe to perform mutating operations,
  * given the original object and its current working copy.
@@ -369,9 +326,14 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 					...omit(
 						newState.tree,
 						action.replacedClientIds.concat(
-							action.replacedClientIds.map(
-								( clientId ) => 'controlled||' + clientId
-							)
+							// Controlled inner blocks are only removed
+							// if the block doesn't move to another position
+							// otherwise their content will be lost.
+							action.replacedClientIds
+								.filter( ( clientId ) => ! subTree[ clientId ] )
+								.map(
+									( clientId ) => 'controlled||' + clientId
+								)
 						)
 					),
 					...subTree,
@@ -637,70 +599,17 @@ const withInnerBlocksRemoveCascade = ( reducer ) => ( state, action ) => {
  */
 const withBlockReset = ( reducer ) => ( state, action ) => {
 	if ( action.type === 'RESET_BLOCKS' ) {
-		/**
-		 * A list of client IDs associated with the top level entity (like a
-		 * post or template). It excludes the client IDs of blocks associated
-		 * with other entities, like inner block controllers or reusable blocks.
-		 */
-		const visibleClientIds = getNestedBlockClientIds(
-			state?.order ?? {},
-			'',
-			state?.controlledInnerBlocks ?? {}
-		);
-
-		// pickBy returns only the truthy values from controlledInnerBlocks
-		const controlledInnerBlocks = Object.keys(
-			pickBy( state?.controlledInnerBlocks ?? {} )
-		);
-
-		/**
-		 * Each update operation consists of a few parts:
-		 * 1. First, the client IDs associated with the top level entity are
-		 *    removed from the existing state key, leaving in place controlled
-		 *    blocks (like reusable blocks and inner block controllers).
-		 * 2. Second, the blocks from the reset action are used to calculate the
-		 *    individual state keys. This will re-populate the clientIDs which
-		 *    were removed in step 1.
-		 * 3. In some cases, we remove the recalculated inner block controllers,
-		 *    letting their old values persist. We need to do this because the
-		 *    reset block action from a top-level entity is not aware of any
-		 *    inner blocks inside InnerBlock controllers. So if the new values
-		 *    were used, it would not take into account the existing InnerBlocks
-		 *    which already exist in the state for inner block controllers. For
-		 *    example, `attributes` uses the newly computed value for controllers
-		 *    since attributes are stored in the top-level entity. But `order`
-		 *    uses the previous value for the controllers since the new value
-		 *    does not include the order of controlled inner blocks. So if the
-		 *    new value was used, template parts would disappear from the editor
-		 *    whenever you try to undo a change in the top level entity.
-		 */
 		const newState = {
 			...state,
-			byClientId: {
-				...omit( state?.byClientId, visibleClientIds ),
-				...getFlattenedBlocksWithoutAttributes( action.blocks ),
-			},
-			attributes: {
-				...omit( state?.attributes, visibleClientIds ),
-				...getFlattenedBlockAttributes( action.blocks ),
-			},
-			order: {
-				...omit( state?.order, visibleClientIds ),
-				...omit(
-					mapBlockOrder( action.blocks ),
-					controlledInnerBlocks
-				),
-			},
-			parents: {
-				...omit( state?.parents, visibleClientIds ),
-				...mapBlockParents( action.blocks ),
-			},
-			controlledInnerBlocks: state?.controlledInnerBlocks || {},
+			byClientId: getFlattenedBlocksWithoutAttributes( action.blocks ),
+			attributes: getFlattenedBlockAttributes( action.blocks ),
+			order: mapBlockOrder( action.blocks ),
+			parents: mapBlockParents( action.blocks ),
+			controlledInnerBlocks: {},
 		};
 
 		const subTree = buildBlockTree( newState, action.blocks );
 		newState.tree = {
-			...omit( state?.tree, visibleClientIds ),
 			...subTree,
 			// Root
 			'': {

package/src/store/selectors.js

@@ -30,6 +30,7 @@ import {
 	parse,
 } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
 import { symbol } from '@wordpress/icons';
 
 /**
@@ -826,6 +827,7 @@ export const isAncestorMultiSelected = createSelector(
 		state.selection.selectionEnd.clientId,
 	]
 );
+
 /**
  * Returns the client ID of the block which begins the multi-selection set, or
  * null if there is no multi-selection.
@@ -1259,15 +1261,43 @@ const canInsertBlockTypeUnmemoized = (
 		parentName
 	);
 
-	if ( hasParentAllowedBlock !== null && hasBlockAllowedParent !== null ) {
-		return hasParentAllowedBlock || hasBlockAllowedParent;
-	} else if ( hasParentAllowedBlock !== null ) {
-		return hasParentAllowedBlock;
-	} else if ( hasBlockAllowedParent !== null ) {
-		return hasBlockAllowedParent;
+	const canInsert =
+		( hasParentAllowedBlock === null && hasBlockAllowedParent === null ) ||
+		hasParentAllowedBlock === true ||
+		hasBlockAllowedParent === true;
+
+	if ( ! canInsert ) {
+		return canInsert;
 	}
 
-	return true;
+	/**
+	 * This filter is an ad-hoc solution to prevent adding template parts inside post content.
+	 * Conceptually, having a filter inside a selector is bad pattern so this code will be
+	 * replaced by a declarative API that doesn't the following drawbacks:
+	 *
+	 * Filters are not reactive: Upon switching between "template mode" and non "template mode",
+	 * the filter and selector won't necessarily be executed again. For now, it doesn't matter much
+	 * because you can't switch between the two modes while the inserter stays open.
+	 *
+	 * Filters are global: Once they're defined, they will affect all editor instances and all registries.
+	 * An ideal API would only affect specific editor instances.
+	 */
+	return applyFilters(
+		'blockEditor.__unstableCanInsertBlockType',
+		canInsert,
+		blockType,
+		rootClientId,
+		{
+			// Pass bound selectors of the current registry. If we're in a nested
+			// context, the data will differ from the one selected from the root
+			// registry.
+			getBlock: getBlock.bind( null, state ),
+			getBlockParentsByBlockName: getBlockParentsByBlockName.bind(
+				null,
+				state
+			),
+		}
+	);
 };
 
 /**

package/src/style.scss

@@ -32,12 +32,12 @@
 @import "./components/default-block-appender/style.scss";
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";
-@import "./components/justify-content-control/style.scss";
-@import "./components/link-control/style.scss";
-@import "./components/line-height-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inner-blocks/style.scss";
 @import "./components/inserter-list-item/style.scss";
+@import "./components/justify-content-control/style.scss";
+@import "./components/line-height-control/style.scss";
+@import "./components/link-control/style.scss";
 @import "./components/list-view/style.scss";
 @import "./components/media-replace-flow/style.scss";
 @import "./components/media-placeholder/style.scss";
@@ -55,6 +55,7 @@
 @import "./hooks/anchor.scss";
 @import "./hooks/layout.scss";
 @import "./hooks/border.scss";
+@import "./hooks/dimensions.scss";
 @import "./hooks/typography.scss";
 
 @import "./components/block-toolbar/style.scss";

package/src/utils/get-paste-event-data.js

@@ -27,7 +27,7 @@ export function getPasteEventData( { clipboardData } ) {
 
 	const files = getFilesFromDataTransfer(
 		clipboardData
-	).filter( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) );
+	).filter( ( { type } ) => /^image\/(?:jpe?g|png|gif|webp)$/.test( type ) );
 
 	// Only process files if no HTML is present.
 	// A pasted file may have the URL as plain text.

package/src/utils/parse-css-unit-to-px.js

@@ -8,7 +8,7 @@ function parseUnit( cssUnit ) {
 	const match = cssUnit
 		?.trim()
 		.match(
-			/^(0?[-.]?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/
+			/^(0?[-.]?\d*\.?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/
 		);
 	if ( ! isNaN( cssUnit ) && ! isNaN( parseFloat( cssUnit ) ) ) {
 		return { value: parseFloat( cssUnit ), unit: 'px' };

package/src/utils/test/parse-css-unit-to-px.js

@@ -52,6 +52,7 @@ describe( 'getPxFromCssUnit', () => {
 		const testData = [
 			[ '2em', '20px' ],
 			[ '2rem', '20px' ],
+			[ '1.125rem', '11px' ],
 			[ '20vw', '20px' ],
 			[ '20vh', '40px' ],
 			[ '20vmin', '20px' ],

package/src/utils/transform-styles/index.js

@@ -23,23 +23,20 @@ import wrap from './transforms/wrap';
  * @return {Array} converted rules.
  */
 const transformStyles = ( styles, wrapperClassName = '' ) => {
-	return map(
-		styles,
-		( { css, baseURL, __experimentalNoWrapper = false } ) => {
-			const transforms = [];
-			if ( wrapperClassName && ! __experimentalNoWrapper ) {
-				transforms.push( wrap( wrapperClassName ) );
-			}
-			if ( baseURL ) {
-				transforms.push( urlRewrite( baseURL ) );
-			}
-			if ( transforms.length ) {
-				return traverse( css, compose( transforms ) );
-			}
-
-			return css;
+	return map( styles, ( { css, baseURL } ) => {
+		const transforms = [];
+		if ( wrapperClassName ) {
+			transforms.push( wrap( wrapperClassName ) );
+		}
+		if ( baseURL ) {
+			transforms.push( urlRewrite( baseURL ) );
 		}
-	);
+		if ( transforms.length ) {
+			return traverse( css, compose( transforms ) );
+		}
+
+		return css;
+	} );
 };
 
 export default transformStyles;