@wordpress/block-editor 8.5.2 → 8.6.0

package/src/components/inserter/style.native.scss

@@ -1,13 +1,34 @@
 /** @format */
 
-.addBlockButton {
-	color: $blue-wordpress;
+.inserter-menu__add-block-button-icon {
+	color: $blue-50;
 }
 
-.addBlockButtonDark {
+.inserter-menu__add-block-button-icon--dark {
 	color: $blue-30;
 }
 
+.inserter-menu__add-block-button-icon--expanded {
+	color: $white;
+}
+
+.inserter-menu__add-block-button {
+	border-radius: 22px;
+	background-color: $blue-50;
+	margin: 8px;
+	padding: 6px 16px 6px 12px;
+}
+
+.inserter-menu__add-block-button--dark {
+	background-color: $blue-30;
+}
+
+.inserter-menu__add-block-button-text {
+	color: $white;
+	font-weight: 500;
+	align-self: center;
+}
+
 .inserter-menu__list-wrapper {
 	flex: 1;
 }

package/src/components/navigable-toolbar/README.md

@@ -0,0 +1,16 @@
+# NavigableToolbar
+
+A toolbar that can be navigated with a keyboard
+
+## Props
+
+The component accepts the following props. Props not included in this set will be applied to the element wrapping NavigableMenu content.
+
+## `focusOnMount`
+
+Whether to immediately focus when the component mounts.
+
+- Type: `Boolean`
+- Required: No
+- Default: false
+

package/src/components/rich-text/index.js

@@ -36,7 +36,6 @@ import { useBlockEditContext } from '../block-edit';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
-import { useCaretInFormat } from './use-caret-in-format';
 import { useMarkPersistent } from './use-mark-persistent';
 import { usePasteHandler } from './use-paste-handler';
 import { useInputRules } from './use-input-rules';
@@ -268,7 +267,6 @@ function RichTextWrapper(
 		onChange,
 	} );
 
-	useCaretInFormat( { value } );
 	useMarkPersistent( { html: adjustedValue, value } );
 
 	const keyboardShortcuts = useRef( new Set() );

package/src/components/rich-text/index.native.js

@@ -125,7 +125,6 @@ function RichTextWrapper(
 	const embedHandlerPickerRef = useRef();
 	const selector = ( select ) => {
 		const {
-			isCaretWithinFormattedText,
 			getSelectionStart,
 			getSelectionEnd,
 			getSettings,
@@ -163,7 +162,6 @@ function RichTextWrapper(
 		}
 
 		return {
-			isCaretWithinFormattedText: isCaretWithinFormattedText(),
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
@@ -177,7 +175,6 @@ function RichTextWrapper(
 	// retrieved from the store on merge.
 	// To do: fix this somehow.
 	const {
-		isCaretWithinFormattedText,
 		selectionStart,
 		selectionEnd,
 		isSelected,
@@ -600,7 +597,6 @@ function RichTextWrapper(
 			__unstableIsSelected={ isSelected }
 			__unstableInputRule={ inputRule }
 			__unstableMultilineTag={ multilineTag }
-			__unstableIsCaretWithinFormattedText={ isCaretWithinFormattedText }
 			__unstableOnEnterFormattedText={ enterFormattedText }
 			__unstableOnExitFormattedText={ exitFormattedText }
 			__unstableOnCreateUndoLevel={ __unstableMarkLastChangeAsPersistent }

package/src/components/use-block-display-information/index.js

@@ -19,6 +19,7 @@ import { store as blockEditorStore } from '../../store';
  * @property {string} title       Human-readable block type label.
  * @property {WPIcon} icon        Block type icon.
  * @property {string} description A detailed block type description.
+ * @property {string} anchor      HTML anchor.
  */
 
 /**
@@ -63,6 +64,7 @@ export default function useBlockDisplayInformation( clientId ) {
 				title: match.title || blockType.title,
 				icon: match.icon || blockType.icon,
 				description: match.description || blockType.description,
+				anchor: attributes?.anchor,
 			};
 		},
 		[ clientId ]

package/src/hooks/border.js

@@ -1,53 +1,174 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import {
+	__experimentalBorderBoxControl as BorderBoxControl,
+	__experimentalHasSplitBorders as hasSplitBorders,
+	__experimentalIsDefinedBorder as isDefinedBorder,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { Platform } from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
 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 { getColorClassName } from '../components/colors';
 import InspectorControls from '../components/inspector-controls';
+import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import useSetting from '../components/use-setting';
-import { cleanEmptyObject } from './utils';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 
+const borderSides = [ 'top', 'right', 'bottom', 'left' ];
+
+const hasBorderValue = ( props ) => {
+	const { borderColor, style } = props.attributes;
+	return isDefinedBorder( style?.border ) || !! borderColor;
+};
+
+// The border color, style, and width are omitted so they get undefined. The
+// border radius is separate and must retain its selection.
+const resetBorder = ( { attributes = {}, setAttributes } ) => {
+	const { style } = attributes;
+	setAttributes( {
+		borderColor: undefined,
+		style: {
+			...style,
+			border: cleanEmptyObject( {
+				radius: style?.border?.radius,
+			} ),
+		},
+	} );
+};
+
+const resetBorderFilter = ( newAttributes ) => ( {
+	...newAttributes,
+	borderColor: undefined,
+	style: {
+		...newAttributes.style,
+		border: {
+			radius: newAttributes.style?.border?.radius,
+		},
+	},
+} );
+
+const getColorByProperty = ( colors, property, value ) => {
+	let matchedColor;
+
+	colors.some( ( origin ) =>
+		origin.colors.some( ( color ) => {
+			if ( color[ property ] === value ) {
+				matchedColor = color;
+				return true;
+			}
+
+			return false;
+		} )
+	);
+
+	return matchedColor;
+};
+
+export const getMultiOriginColor = ( { colors, namedColor, customColor } ) => {
+	// Search each origin (default, theme, or user) for matching color by name.
+	if ( namedColor ) {
+		const colorObject = getColorByProperty( colors, 'slug', namedColor );
+		if ( colorObject ) {
+			return colorObject;
+		}
+	}
+
+	// Skip if no custom color or matching named color.
+	if ( ! customColor ) {
+		return { color: undefined };
+	}
+
+	// Attempt to find color via custom color value or build new object.
+	const colorObject = getColorByProperty( colors, 'color', customColor );
+	return colorObject ? colorObject : { color: customColor };
+};
+
+const getBorderObject = ( attributes, colors ) => {
+	const { borderColor, style } = attributes;
+	const { border: borderStyles } = style || {};
+
+	// If we have a named color for a flat border. Fetch that color object and
+	// apply that color's value to the color property within the style object.
+	if ( borderColor ) {
+		const { color } = getMultiOriginColor( {
+			colors,
+			namedColor: borderColor,
+		} );
+
+		return color ? { ...borderStyles, color } : borderStyles;
+	}
+
+	// Individual side border color slugs are stored within the border style
+	// object. If we don't have a border styles object we have nothing further
+	// to hydrate.
+	if ( ! borderStyles ) {
+		return borderStyles;
+	}
+
+	// If we have named colors for the individual side borders, retrieve their
+	// related color objects and apply the real color values to the split
+	// border objects.
+	const hydratedBorderStyles = { ...borderStyles };
+	borderSides.forEach( ( side ) => {
+		const colorSlug = getColorSlugFromVariable(
+			hydratedBorderStyles[ side ]?.color
+		);
+		if ( colorSlug ) {
+			const { color } = getMultiOriginColor( {
+				colors,
+				namedColor: colorSlug,
+			} );
+			hydratedBorderStyles[ side ] = {
+				...hydratedBorderStyles[ side ],
+				color,
+			};
+		}
+	} );
+
+	return hydratedBorderStyles;
+};
+
+function getColorSlugFromVariable( value ) {
+	const namedColor = /var:preset\|color\|(.+)/.exec( value );
+	if ( namedColor && namedColor[ 1 ] ) {
+		return namedColor[ 1 ];
+	}
+	return null;
+}
+
 export function BorderPanel( props ) {
-	const { clientId } = props;
+	const { attributes, clientId, setAttributes } = props;
+	const { style } = attributes;
+	const { colors } = useMultipleOriginColorsAndGradients();
 
+	const isSupported = hasBorderSupport( props.name );
 	const isColorSupported =
 		useSetting( 'border.color' ) && hasBorderSupport( props.name, 'color' );
-
 	const isRadiusSupported =
 		useSetting( 'border.radius' ) &&
 		hasBorderSupport( props.name, 'radius' );
-
 	const isStyleSupported =
 		useSetting( 'border.style' ) && hasBorderSupport( props.name, 'style' );
-
 	const isWidthSupported =
 		useSetting( 'border.width' ) && hasBorderSupport( props.name, 'width' );
 
@@ -58,7 +179,7 @@ export function BorderPanel( props ) {
 		! isWidthSupported,
 	].every( Boolean );
 
-	if ( isDisabled ) {
+	if ( isDisabled || ! isSupported ) {
 		return null;
 	}
 
@@ -67,61 +188,103 @@ export function BorderPanel( props ) {
 		'__experimentalDefaultControls',
 	] );
 
-	const createResetAllFilter = (
-		borderAttribute,
-		topLevelAttributes = {}
-	) => ( newAttributes ) => ( {
-		...newAttributes,
-		...topLevelAttributes,
-		style: {
-			...newAttributes.style,
-			border: {
-				...newAttributes.style?.border,
-				[ borderAttribute ]: undefined,
-			},
-		},
-	} );
+	const showBorderByDefault =
+		defaultBorderControls?.color || defaultBorderControls?.width;
+
+	const onBorderChange = ( newBorder ) => {
+		// Filter out named colors and apply them to appropriate block
+		// attributes so that CSS classes can be used to apply those colors.
+		// e.g. has-primary-border-top-color.
+
+		let newBorderStyles = { ...newBorder };
+		let newBorderColor;
+
+		if ( hasSplitBorders( newBorder ) ) {
+			// For each side check if the side has a color value set
+			// If so, determine if it belongs to a named color, in which case
+			// we update the color property.
+			//
+			// This deliberately overwrites `newBorderStyles` to avoid mutating
+			// the passed object which causes problems otherwise.
+			newBorderStyles = {
+				top: { ...newBorder.top },
+				right: { ...newBorder.right },
+				bottom: { ...newBorder.bottom },
+				left: { ...newBorder.left },
+			};
+
+			borderSides.forEach( ( side ) => {
+				if ( newBorder[ side ]?.color ) {
+					const colorObject = getMultiOriginColor( {
+						colors,
+						customColor: newBorder[ side ]?.color,
+					} );
+
+					if ( colorObject.slug ) {
+						newBorderStyles[
+							side
+						].color = `var:preset|color|${ colorObject.slug }`;
+					}
+				}
+			} );
+		} else if ( newBorder?.color ) {
+			// We have a flat border configuration. Apply named color slug to
+			// `borderColor` attribute and clear color style property if found.
+			const customColor = newBorder?.color;
+			const colorObject = getMultiOriginColor( { colors, customColor } );
+
+			if ( colorObject.slug ) {
+				newBorderColor = colorObject.slug;
+				newBorderStyles.color = undefined;
+			}
+		}
+
+		// Ensure previous border radius styles are maintained and clean
+		// overall result for empty objects or properties.
+		const newStyle = cleanEmptyObject( {
+			...style,
+			border: { radius: style?.border?.radius, ...newBorderStyles },
+		} );
+
+		setAttributes( {
+			style: newStyle,
+			borderColor: newBorderColor,
+		} );
+	};
+
+	const hydratedBorder = getBorderObject( attributes, colors );
 
 	return (
 		<InspectorControls __experimentalGroup="border">
-			{ isWidthSupported && (
+			{ ( isWidthSupported || isColorSupported ) && (
 				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasBorderWidthValue( props ) }
-					label={ __( 'Width' ) }
-					onDeselect={ () => resetBorderWidth( props ) }
-					isShownByDefault={ defaultBorderControls?.width }
-					resetAllFilter={ createResetAllFilter( 'width' ) }
+					hasValue={ () => hasBorderValue( props ) }
+					label={ __( 'Border' ) }
+					onDeselect={ () => resetBorder( props ) }
+					isShownByDefault={ showBorderByDefault }
+					resetAllFilter={ resetBorderFilter }
 					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 } />
+					<BorderBoxControl
+						colors={ colors }
+						enableAlpha={ true }
+						onChange={ onBorderChange }
+						popoverClassNames={ {
+							linked: 'block-editor__border-box-control__popover',
+							top:
+								'block-editor__border-box-control__popover-top',
+							right:
+								'block-editor__border-box-control__popover-right',
+							bottom:
+								'block-editor__border-box-control__popover-bottom',
+							left:
+								'block-editor__border-box-control__popover-left',
+						} }
+						showStyle={ isStyleSupported }
+						value={ hydratedBorder }
+						__experimentalHasMultipleOrigins={ true }
+						__experimentalIsRenderedInSidebar={ true }
+					/>
 				</ToolsPanelItem>
 			) }
 			{ isRadiusSupported && (
@@ -130,7 +293,16 @@ export function BorderPanel( props ) {
 					label={ __( 'Radius' ) }
 					onDeselect={ () => resetBorderRadius( props ) }
 					isShownByDefault={ defaultBorderControls?.radius }
-					resetAllFilter={ createResetAllFilter( 'radius' ) }
+					resetAllFilter={ ( newAttributes ) => ( {
+						...newAttributes,
+						style: {
+							...newAttributes.style,
+							border: {
+								...newAttributes.style?.border,
+								radius: undefined,
+							},
+						},
+					} ) }
 					panelId={ clientId }
 				>
 					<BorderRadiusEdit { ...props } />
@@ -189,3 +361,197 @@ export function removeBorderAttribute( style, attribute ) {
 		},
 	} );
 }
+
+/**
+ * Filters registered block settings, extending attributes to include
+ * `borderColor` if needed.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Updated block settings.
+ */
+function addAttributes( settings ) {
+	if ( ! hasBorderSupport( settings, 'color' ) ) {
+		return settings;
+	}
+
+	// Allow blocks to specify default value if needed.
+	if ( settings.attributes.borderColor ) {
+		return settings;
+	}
+
+	// Add new borderColor attribute to block settings.
+	return {
+		...settings,
+		attributes: {
+			...settings.attributes,
+			borderColor: {
+				type: 'string',
+			},
+		},
+	};
+}
+
+/**
+ * Override props assigned to save component to inject border color.
+ *
+ * @param {Object} props      Additional props applied to save element.
+ * @param {Object} blockType  Block type definition.
+ * @param {Object} attributes Block's attributes.
+ *
+ * @return {Object} Filtered props to apply to save element.
+ */
+function addSaveProps( props, blockType, attributes ) {
+	if (
+		! hasBorderSupport( blockType, 'color' ) ||
+		shouldSkipSerialization( blockType, BORDER_SUPPORT_KEY, 'color' )
+	) {
+		return props;
+	}
+
+	const borderClasses = getBorderClasses( attributes );
+	const newClassName = classnames( props.className, borderClasses );
+
+	// If we are clearing the last of the previous classes in `className`
+	// set it to `undefined` to avoid rendering empty DOM attributes.
+	props.className = newClassName ? newClassName : undefined;
+
+	return props;
+}
+
+/**
+ * Generates a CSS class name consisting of all the applicable border color
+ * classes given the current block attributes.
+ *
+ * @param {Object} attributes Block's attributes.
+ *
+ * @return {string} CSS class name.
+ */
+export function getBorderClasses( attributes ) {
+	const { borderColor, style } = attributes;
+	const borderColorClass = getColorClassName( 'border-color', borderColor );
+
+	return classnames( {
+		'has-border-color': borderColor || style?.border?.color,
+		[ borderColorClass ]: !! borderColorClass,
+	} );
+}
+
+/**
+ * Filters the registered block settings to apply border color styles and
+ * classnames to the block edit wrapper.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+function addEditProps( settings ) {
+	if (
+		! hasBorderSupport( settings, 'color' ) ||
+		shouldSkipSerialization( settings, BORDER_SUPPORT_KEY, 'color' )
+	) {
+		return settings;
+	}
+
+	const existingGetEditWrapperProps = settings.getEditWrapperProps;
+	settings.getEditWrapperProps = ( attributes ) => {
+		let props = {};
+
+		if ( existingGetEditWrapperProps ) {
+			props = existingGetEditWrapperProps( attributes );
+		}
+
+		return addSaveProps( props, settings, attributes );
+	};
+
+	return settings;
+}
+
+/**
+ * This adds inline styles for color palette colors.
+ * Ideally, this is not needed and themes should load their palettes on the editor.
+ *
+ * @param {Function} BlockListBlock Original component.
+ *
+ * @return {Function} Wrapped component.
+ */
+export const withBorderColorPaletteStyles = createHigherOrderComponent(
+	( BlockListBlock ) => ( props ) => {
+		const { name, attributes } = props;
+		const { borderColor, style } = attributes;
+		const { colors } = useMultipleOriginColorsAndGradients();
+
+		if (
+			! hasBorderSupport( name, 'color' ) ||
+			shouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' )
+		) {
+			return <BlockListBlock { ...props } />;
+		}
+
+		const { color: borderColorValue } = getMultiOriginColor( {
+			colors,
+			namedColor: borderColor,
+		} );
+		const { color: borderTopColor } = getMultiOriginColor( {
+			colors,
+			namedColor: getColorSlugFromVariable( style?.border?.top?.color ),
+		} );
+		const { color: borderRightColor } = getMultiOriginColor( {
+			colors,
+			namedColor: getColorSlugFromVariable( style?.border?.right?.color ),
+		} );
+
+		const { color: borderBottomColor } = getMultiOriginColor( {
+			colors,
+			namedColor: getColorSlugFromVariable(
+				style?.border?.bottom?.color
+			),
+		} );
+		const { color: borderLeftColor } = getMultiOriginColor( {
+			colors,
+			namedColor: getColorSlugFromVariable( style?.border?.left?.color ),
+		} );
+
+		const extraStyles = {
+			borderTopColor: borderTopColor || borderColorValue,
+			borderRightColor: borderRightColor || borderColorValue,
+			borderBottomColor: borderBottomColor || borderColorValue,
+			borderLeftColor: borderLeftColor || borderColorValue,
+		};
+
+		let wrapperProps = props.wrapperProps;
+		wrapperProps = {
+			...props.wrapperProps,
+			style: {
+				...props.wrapperProps?.style,
+				...extraStyles,
+			},
+		};
+
+		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
+	}
+);
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/border/addAttributes',
+	addAttributes
+);
+
+addFilter(
+	'blocks.getSaveContent.extraProps',
+	'core/border/addSaveProps',
+	addSaveProps
+);
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/border/addEditProps',
+	addEditProps
+);
+
+addFilter(
+	'editor.BlockListBlock',
+	'core/border/with-border-color-palette-styles',
+	withBorderColorPaletteStyles
+);