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

package/src/components/url-input/README.md

@@ -147,11 +147,6 @@ _Optional._ If this property is added, a label will be generated using label pro
 
 _Optional._ Adds and optional class to the parent `div` that wraps the URLInput field and popover
 
-### `placeholder: String`
-
-_Optional._ Placeholder text to show when the field is empty, similar to the
-[`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
-
 ### `disableSuggestions: Boolean`
 
 _Optional._ Provides additional control over whether suggestions are disabled.

package/src/components/use-canvas-click-redirect/index.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { overEvery, findLast } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
+
+/**
+ * Given an element, returns true if the element is a tabbable text field, or
+ * false otherwise.
+ *
+ * @param {Element} element Element to test.
+ *
+ * @return {boolean} Whether element is a tabbable text field.
+ */
+const isTabbableTextField = overEvery( [
+	isTextField,
+	focus.tabbable.isTabbableIndex,
+] );
+
+export function useCanvasClickRedirect() {
+	return useRefEffect( ( node ) => {
+		function onMouseDown( event ) {
+			// Only handle clicks on the canvas, not the content.
+			if ( event.target !== node ) {
+				return;
+			}
+
+			const focusableNodes = focus.focusable.find( node );
+			const target = findLast( focusableNodes, isTabbableTextField );
+
+			if ( ! target ) {
+				return;
+			}
+
+			const { bottom } = target.getBoundingClientRect();
+
+			// Ensure the click is below the last block.
+			if ( event.clientY < bottom ) {
+				return;
+			}
+
+			placeCaretAtHorizontalEdge( target, true );
+			event.preventDefault();
+		}
+
+		node.addEventListener( 'mousedown', onMouseDown );
+
+		return () => {
+			node.addEventListener( 'mousedown', onMouseDown );
+		};
+	}, [] );
+}

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

@@ -95,10 +95,7 @@ export function onBlockDrop(
 
 		// If the user is moving a block
 		if ( dropType === 'block' ) {
-			const sourceBlockIndex = getBlockIndex(
-				sourceClientIds[ 0 ],
-				sourceRootClientId
-			);
+			const sourceBlockIndex = getBlockIndex( sourceClientIds[ 0 ] );
 
 			// If the user is dropping to the same position, return early.
 			if (
@@ -259,14 +256,10 @@ export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
 		const files = getFilesFromDataTransfer( event.dataTransfer );
 		const html = event.dataTransfer.getData( 'text/html' );
 
-		/**
-		 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
-		 * The order of the checks is important to recognise the HTML drop.
-		 */
-		if ( html ) {
-			_onHTMLDrop( html );
-		} else if ( files.length ) {
+		if ( files.length ) {
 			_onFilesDrop( files );
+		} else if ( html ) {
+			_onHTMLDrop( html );
 		} else {
 			_onDrop( event );
 		}

package/src/components/use-setting/index.js

@@ -15,6 +15,8 @@ import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/
 import { useBlockEditContext } from '../block-edit';
 import { store as blockEditorStore } from '../../store';
 
+const blockedPaths = [ 'color', 'border', 'typography', 'spacing' ];
+
 const deprecatedFlags = {
 	'color.palette': ( settings ) =>
 		settings.colors === undefined ? undefined : settings.colors,
@@ -104,6 +106,13 @@ export default function useSetting( path ) {
 
 	const setting = useSelect(
 		( select ) => {
+			if ( blockedPaths.includes( path ) ) {
+				// eslint-disable-next-line no-console
+				console.warn(
+					'Top level useSetting paths are disabled. Please use a subpath to query the information needed.'
+				);
+				return undefined;
+			}
 			const settings = select( blockEditorStore ).getSettings();
 
 			// 1 - Use __experimental features, if available.

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

@@ -15,19 +15,16 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
-export function toggleRichText( container, toggle ) {
-	Array.from(
-		container.querySelectorAll(
-			// Exclude the Post Title from multi-select disable.
-			'.rich-text:not( .editor-post-title__input )'
-		)
-	).forEach( ( node ) => {
-		if ( toggle ) {
-			node.setAttribute( 'contenteditable', true );
-		} else {
-			node.removeAttribute( 'contenteditable' );
+function toggleRichText( container, toggle ) {
+	Array.from( container.querySelectorAll( '.rich-text' ) ).forEach(
+		( node ) => {
+			if ( toggle ) {
+				node.setAttribute( 'contenteditable', true );
+			} else {
+				node.removeAttribute( 'contenteditable' );
+			}
 		}
-	} );
+	);
 }
 
 /**

package/src/hooks/border-color.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,11 +22,7 @@ import {
 	getColorObjectByAttributeValues,
 } from '../components/colors';
 import useSetting from '../components/use-setting';
-import {
-	hasBorderSupport,
-	removeBorderAttribute,
-	shouldSkipSerialization,
-} from './border';
+import { hasBorderSupport, shouldSkipSerialization } from './border';
 import { cleanEmptyObject } from './utils';
 
 // Defining empty array here instead of inline avoids unnecessary re-renders of
@@ -56,30 +52,15 @@ export function BorderColorEdit( props ) {
 		( colors, origin ) => colors.concat( origin.colors ),
 		[]
 	);
-	const { color: customBorderColor } = style?.border || {};
 	const [ colorValue, setColorValue ] = useState(
 		() =>
 			getColorObjectByAttributeValues(
 				availableColors,
 				borderColor,
-				customBorderColor
+				style?.border?.color
 			)?.color
 	);
 
-	// Detect changes in the color attributes and update the colorValue to keep the
-	// UI in sync. This is necessary for situations when border controls interact with
-	// eachother: eg, setting the border width to zero causes the color and style
-	// selections to be cleared.
-	useEffect( () => {
-		setColorValue(
-			getColorObjectByAttributeValues(
-				availableColors,
-				borderColor,
-				customBorderColor
-			)?.color
-		);
-	}, [ borderColor, customBorderColor, availableColors ] );
-
 	const onChangeColor = ( value ) => {
 		setColorValue( value );
 
@@ -117,39 +98,6 @@ export function BorderColorEdit( props ) {
 	);
 }
 
-/**
- * Checks if there is a current value in the border color block support
- * attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a border color value set.
- */
-export function hasBorderColorValue( props ) {
-	const {
-		attributes: { borderColor, style },
-	} = props;
-
-	return !! borderColor || !! style?.border?.color;
-}
-
-/**
- * Resets the border color block support attributes. This can be used when
- * disabling the border color support controls 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 resetBorderColor( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		borderColor: undefined,
-		style: removeBorderAttribute( style, 'color' ),
-	} );
-}
-
 /**
  * Filters registered block settings, extending attributes to include
  * `borderColor` if needed.

package/src/hooks/border-radius.js

@@ -3,7 +3,6 @@
  */
 import BorderRadiusControl from '../components/border-radius-control';
 import { cleanEmptyObject } from './utils';
-import { removeBorderAttribute } from './border';
 
 /**
  * Inspector control panel containing the border radius related configuration.
@@ -41,34 +40,3 @@ export function BorderRadiusEdit( props ) {
 		/>
 	);
 }
-
-/**
- * Checks if there is a current value in the border radius block support
- * attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a border radius value set.
- */
-export function hasBorderRadiusValue( props ) {
-	const borderRadius = props.attributes.style?.border?.radius;
-
-	if ( typeof borderRadius === 'object' ) {
-		return Object.entries( borderRadius ).some( Boolean );
-	}
-
-	return !! borderRadius;
-}
-
-/**
- * Resets the border radius block support attributes. This can be used when
- * disabling the border radius support controls 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 resetBorderRadius( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-	setAttributes( { style: removeBorderAttribute( style, 'radius' ) } );
-}

package/src/hooks/border-style.js

@@ -3,7 +3,6 @@
  */
 import BorderStyleControl from '../components/border-style-control';
 import { cleanEmptyObject } from './utils';
-import { removeBorderAttribute } from './border';
 
 /**
  * Inspector control for configuring border style property.
@@ -37,28 +36,3 @@ export const BorderStyleEdit = ( props ) => {
 		/>
 	);
 };
-
-/**
- * Checks if there is a current value in the border style block support
- * attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a border style value set.
- */
-export function hasBorderStyleValue( props ) {
-	return !! props.attributes.style?.border?.style;
-}
-
-/**
- * Resets the border style block support attribute. This can be used when
- * disabling the border style 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 resetBorderStyle( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-	setAttributes( { style: removeBorderAttribute( style, 'style' ) } );
-}

package/src/hooks/border-width.js

@@ -5,14 +5,13 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useEffect, 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;
@@ -32,12 +31,25 @@ 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();
-	const [ customColorSelection, setCustomColorSelection ] = 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 onChange = ( newWidth ) => {
 		let newStyle = {
@@ -52,39 +64,28 @@ 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 && ! 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.
+		if ( hasZeroWidth ) {
 			borderPaletteColor = undefined;
 			newStyle.border.color = undefined;
 			newStyle.border.style = 'none';
 		}
 
-		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;
-			}
+		// 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 width was reset, clean out undefined styles.
@@ -112,28 +113,3 @@ 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,41 +2,23 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import { PanelBody } 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 { cleanEmptyObject } from './utils';
+import { BorderColorEdit } from './border-color';
+import { BorderRadiusEdit } from './border-radius';
+import { BorderStyleEdit } from './border-style';
+import { BorderWidthEdit } from './border-width';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 
 export function BorderPanel( props ) {
-	const { clientId } = props;
 	const isDisabled = useIsBorderDisabled( props );
 	const isSupported = hasBorderSupport( props.name );
 
@@ -57,80 +39,22 @@ 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 __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>
+			<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>
 	);
 }
@@ -194,22 +118,3 @@ 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,5 +1,19 @@
-.border-block-support-panel {
-	.single-column {
-		grid-column: span 1;
+.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;
+		}
 	}
 }
+

package/src/hooks/letter-spacing.js

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

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' ) }