@wordpress/block-editor 8.0.17 → 8.1.2-next.f435e9e01b.0

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/color-panel.js

@@ -2,13 +2,12 @@
  * WordPress dependencies
  */
 import { useState, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
 import ContrastChecker from '../components/contrast-checker';
+import ToolsPanelColorDropdown from '../components/colors-gradients/tools-panel-color-dropdown';
 import InspectorControls from '../components/inspector-controls';
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 
@@ -17,13 +16,14 @@ function getComputedStyle( node ) {
 }
 
 export default function ColorPanel( {
+	enableAlpha = false,
 	settings,
 	clientId,
 	enableContrastChecking = true,
-	showTitle = true,
 } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
+	const [ detectedLinkColor, setDetectedLinkColor ] = useState();
 	const ref = useBlockRef( clientId );
 
 	useEffect( () => {
@@ -36,6 +36,11 @@ export default function ColorPanel( {
 		}
 		setDetectedColor( getComputedStyle( ref.current ).color );
 
+		const firstLinkElement = ref.current?.querySelector( 'a' );
+		if ( firstLinkElement && !! firstLinkElement.innerText ) {
+			setDetectedLinkColor( getComputedStyle( firstLinkElement ).color );
+		}
+
 		let backgroundColorNode = ref.current;
 		let backgroundColor = getComputedStyle( backgroundColorNode )
 			.backgroundColor;
@@ -54,22 +59,23 @@ export default function ColorPanel( {
 	} );
 
 	return (
-		<InspectorControls>
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				initialOpen={ false }
-				settings={ settings }
-				showTitle={ showTitle }
-				__experimentalHasMultipleOrigins
-				__experimentalIsRenderedInSidebar
-			>
-				{ enableContrastChecking && (
-					<ContrastChecker
-						backgroundColor={ detectedBackgroundColor }
-						textColor={ detectedColor }
-					/>
-				) }
-			</PanelColorGradientSettings>
+		<InspectorControls __experimentalGroup="color">
+			{ settings.map( ( setting, index ) => (
+				<ToolsPanelColorDropdown
+					key={ index }
+					settings={ setting }
+					panelId={ clientId }
+					enableAlpha={ enableAlpha }
+				/>
+			) ) }
+			{ enableContrastChecking && (
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedColor }
+					enableAlphaChecker={ enableAlpha }
+					linkColor={ detectedLinkColor }
+				/>
+			) }
 		</InspectorControls>
 	);
 }

package/src/hooks/color-panel.native.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useGlobalStyles } from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
+import ContrastChecker from '../components/contrast-checker';
+import InspectorControls from '../components/inspector-controls';
+
+const ColorPanel = ( { settings } ) => {
+	const globalStyles = useGlobalStyles();
+
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedTextColor, setDetectedTextColor ] = useState();
+
+	const { baseGlobalStyles } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			baseGlobalStyles: getSettings()
+				?.__experimentalGlobalStylesBaseStyles?.color,
+		};
+	} );
+
+	useEffect( () => {
+		// The following logic is used to determine current text/background colors:
+		// 1. The globalStyles object is queried to determine whether a color has been
+		// set via a block's settings.
+		// 2. If a block-based theme is in use and no globalStyles exist, the theme's
+		// default/base colors are used.
+		// 3. If no globalStyles exist and a theme isn't block-based, there is no way
+		// to determine the default text/background color and the checker won't run.
+		const textColor = globalStyles?.color || baseGlobalStyles?.text;
+		const backgroundColor =
+			globalStyles?.backgroundColor || baseGlobalStyles?.background;
+
+		setDetectedTextColor( textColor );
+		setDetectedBackgroundColor( backgroundColor );
+	}, [ globalStyles, baseGlobalStyles ] );
+
+	return (
+		<InspectorControls>
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				initialOpen={ false }
+				settings={ settings }
+			>
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedTextColor }
+				/>
+			</PanelColorGradientSettings>
+		</InspectorControls>
+	);
+};
+
+export default ColorPanel;

package/src/hooks/color.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isObject, setWith, clone } from 'lodash';
+import { isObject } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,7 +26,7 @@ import {
 	getGradientValueBySlug,
 	getGradientSlugByValue,
 } from '../components/gradients';
-import { cleanEmptyObject } from './utils';
+import { cleanEmptyObject, transformStyles, immutableSet } from './utils';
 import ColorPanel from './color-panel';
 import useSetting from '../components/use-setting';
 
@@ -77,6 +77,125 @@ const hasTextColorSupport = ( blockType ) => {
 	return colorSupport && colorSupport.text !== false;
 };
 
+/**
+ * Checks whether a color has been set either with a named preset color in
+ * a top level block attribute or as a custom value within the style attribute
+ * object.
+ *
+ * @param {string} name Name of the color to check.
+ * @return {boolean} Whether or not a color has a value.
+ */
+const hasColor = ( name ) => ( props ) => {
+	if ( name === 'background' ) {
+		return (
+			!! props.attributes.backgroundColor ||
+			!! props.attributes.style?.color?.background ||
+			!! props.attributes.gradient ||
+			!! props.attributes.style?.color?.gradient
+		);
+	}
+
+	if ( name === 'link' ) {
+		return !! props.attributes.style?.elements?.link?.color?.text;
+	}
+
+	return (
+		!! props.attributes[ `${ name }Color` ] ||
+		!! props.attributes.style?.color?.[ name ]
+	);
+};
+
+/**
+ * Clears a single color property from a style object.
+ *
+ * @param {Array}  path  Path to color property to clear within styles object.
+ * @param {Object} style Block attributes style object.
+ * @return {Object} Styles with the color property omitted.
+ */
+const clearColorFromStyles = ( path, style ) =>
+	cleanEmptyObject( immutableSet( style, path, undefined ) );
+
+/**
+ * Resets the block attributes for text color.
+ *
+ * @param {Object}   props               Current block props.
+ * @param {Object}   props.attributes    Block attributes.
+ * @param {Function} props.setAttributes Block's setAttributes prop used to apply reset.
+ */
+const resetTextColor = ( { attributes, setAttributes } ) => {
+	setAttributes( {
+		textColor: undefined,
+		style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
+	} );
+};
+
+/**
+ * Clears text color related properties from supplied attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {Object} Update block attributes with text color properties omitted.
+ */
+const resetAllTextFilter = ( attributes ) => ( {
+	textColor: undefined,
+	style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
+} );
+
+/**
+ * Resets the block attributes for link color.
+ *
+ * @param {Object}   props               Current block props.
+ * @param {Object}   props.attributes    Block attributes.
+ * @param {Function} props.setAttributes Block's setAttributes prop used to apply reset.
+ */
+const resetLinkColor = ( { attributes, setAttributes } ) => {
+	const path = [ 'elements', 'link', 'color', 'text' ];
+	setAttributes( { style: clearColorFromStyles( path, attributes.style ) } );
+};
+
+/**
+ * Clears link color related properties from supplied attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {Object} Update block attributes with link color properties omitted.
+ */
+const resetAllLinkFilter = ( attributes ) => ( {
+	style: clearColorFromStyles(
+		[ 'elements', 'link', 'color', 'text' ],
+		attributes.style
+	),
+} );
+
+/**
+ * Clears all background color related properties including gradients from
+ * supplied block attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {Object} Block attributes with background and gradient omitted.
+ */
+const clearBackgroundAndGradient = ( attributes ) => ( {
+	backgroundColor: undefined,
+	gradient: undefined,
+	style: {
+		...attributes.style,
+		color: {
+			...attributes.style?.color,
+			background: undefined,
+			gradient: undefined,
+		},
+	},
+} );
+
+/**
+ * Resets the block attributes for both background color and gradient.
+ *
+ * @param {Object}   props               Current block props.
+ * @param {Object}   props.attributes    Block attributes.
+ * @param {Function} props.setAttributes Block's setAttributes prop used to apply reset.
+ */
+const resetBackgroundAndGradient = ( { attributes, setAttributes } ) => {
+	setAttributes( clearBackgroundAndGradient( attributes ) );
+};
+
 /**
  * Filters registered block settings, extending attributes to include
  * `backgroundColor` and `textColor` attribute.
@@ -136,7 +255,7 @@ export function addSaveProps( props, blockType, attributes ) {
 
 	const hasGradient = hasGradientSupport( blockType );
 
-	// I'd have prefered to avoid the "style" attribute usage here
+	// I'd have preferred to avoid the "style" attribute usage here
 	const { backgroundColor, textColor, gradient, style } = attributes;
 
 	const backgroundClass = getColorClassName(
@@ -168,7 +287,7 @@ export function addSaveProps( props, blockType, attributes ) {
 }
 
 /**
- * Filters registered block settings to extand the block edit wrapper
+ * Filters registered block settings to extend the block edit wrapper
  * to apply the desired styles and classnames properly.
  *
  * @param {Object} settings Original block settings.
@@ -203,10 +322,6 @@ const getLinkColorFromAttributeValue = ( colors, value ) => {
 	return value;
 };
 
-function immutableSet( object, path, value ) {
-	return setWith( object ? clone( object ) : {}, path, value, clone );
-}
-
 /**
  * Inspector control panel containing the color related configuration
  *
@@ -371,13 +486,19 @@ export function ColorEdit( props ) {
 		props.setAttributes( { style: newStyle } );
 	};
 
+	const enableContrastChecking =
+		Platform.OS === 'web' && ! gradient && ! style?.color?.gradient;
+
+	const defaultColorControls = getBlockSupport( props.name, [
+		COLOR_SUPPORT_KEY,
+		'__experimentalDefaultControls',
+	] );
+
 	return (
 		<ColorPanel
-			enableContrastChecking={
-				// Turn on contrast checker for web only since it's not supported on mobile yet.
-				Platform.OS === 'web' && ! gradient && ! style?.color?.gradient
-			}
+			enableContrastChecking={ enableContrastChecking }
 			clientId={ props.clientId }
+			enableAlpha={ true }
 			settings={ [
 				...( hasTextColor
 					? [
@@ -389,6 +510,10 @@ export function ColorEdit( props ) {
 									textColor,
 									style?.color?.text
 								).color,
+								isShownByDefault: defaultColorControls?.text,
+								hasValue: () => hasColor( 'text' )( props ),
+								onDeselect: () => resetTextColor( props ),
+								resetAllFilter: resetAllTextFilter,
 							},
 					  ]
 					: [] ),
@@ -408,6 +533,13 @@ export function ColorEdit( props ) {
 								onGradientChange: hasGradientColor
 									? onChangeGradient
 									: undefined,
+								isShownByDefault:
+									defaultColorControls?.background,
+								hasValue: () =>
+									hasColor( 'background' )( props ),
+								onDeselect: () =>
+									resetBackgroundAndGradient( props ),
+								resetAllFilter: clearBackgroundAndGradient,
 							},
 					  ]
 					: [] ),
@@ -422,6 +554,10 @@ export function ColorEdit( props ) {
 								),
 								clearable: !! style?.elements?.link?.color
 									?.text,
+								isShownByDefault: defaultColorControls?.link,
+								hasValue: () => hasColor( 'link' )( props ),
+								onDeselect: () => resetLinkColor( props ),
+								resetAllFilter: resetAllLinkFilter,
 							},
 					  ]
 					: [] ),
@@ -484,6 +620,34 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 	}
 );
 
+const MIGRATION_PATHS = {
+	linkColor: [ [ 'style', 'elements', 'link', 'color', 'text' ] ],
+	textColor: [ [ 'textColor' ], [ 'style', 'color', 'text' ] ],
+	backgroundColor: [
+		[ 'backgroundColor' ],
+		[ 'style', 'color', 'background' ],
+	],
+	gradient: [ [ 'gradient' ], [ 'style', 'color', 'gradient' ] ],
+};
+
+export function addTransforms( result, source, index, results ) {
+	const destinationBlockType = result.name;
+	const activeSupports = {
+		linkColor: hasLinkColorSupport( destinationBlockType ),
+		textColor: hasTextColorSupport( destinationBlockType ),
+		backgroundColor: hasBackgroundColorSupport( destinationBlockType ),
+		gradient: hasGradientSupport( destinationBlockType ),
+	};
+	return transformStyles(
+		activeSupports,
+		MIGRATION_PATHS,
+		result,
+		source,
+		index,
+		results
+	);
+}
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/color/addAttribute',
@@ -507,3 +671,9 @@ addFilter(
 	'core/color/with-color-palette-styles',
 	withColorPaletteStyles
 );
+
+addFilter(
+	'blocks.switchToBlockType.transformedBlock',
+	'core/color/addTransforms',
+	addTransforms
+);

package/src/hooks/color.scss

@@ -0,0 +1,85 @@
+.color-block-support-panel {
+	.block-editor-contrast-checker {
+		/**
+		 * Contrast checkers are forced to the bottom of the panel so all
+		 * injected color controls can appear as a single item group without
+		 * the contrast checkers suddenly appearing between items.
+		 */
+		order: 9999;
+		grid-column: span 2;
+		margin-top: $grid-unit-20;
+
+		.components-notice__content {
+			margin-right: 0;
+		}
+	}
+
+	/* Increased specificity required to remove the slot wrapper's row gap */
+	&#{&} {
+		.color-block-support-panel__inner-wrapper {
+			row-gap: 0;
+		}
+	}
+
+	/**
+	 * The following styles replicate the separated border of the
+	 * `ItemGroup` component but allows for hidden items. This is because
+	 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
+	 * must at least render a placeholder which would otherwise interfere
+	 * with the `:last-child` styles.
+	 */
+	.block-editor-tools-panel-color-gradient-settings__item {
+		padding: 0;
+
+		// Border styles.
+		border-left: 1px solid rgba(0, 0, 0, 0.1);
+		border-right: 1px solid rgba(0, 0, 0, 0.1);
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+		&.first {
+			border-top-left-radius: 2px;
+			border-top-right-radius: 2px;
+			border-top: 1px solid rgba(0, 0, 0, 0.1);
+		}
+
+		&.last {
+			border-bottom-left-radius: 2px;
+			border-bottom-right-radius: 2px;
+		}
+
+		> div,
+		> div > button {
+			border-radius: inherit;
+		}
+	}
+
+	.block-editor-panel-color-gradient-settings__color-indicator {
+		// Show a diagonal line (crossed out) for empty swatches.
+		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+	}
+
+	/**
+	 * The following few styles fix the layout and spacing for the due to the
+	 * introduced wrapper element by the `Item` component.
+	 */
+	.block-editor-tools-panel-color-dropdown {
+		display: block;
+		padding: 0;
+
+		> button {
+			height: 46px;
+
+			&.is-open {
+				background: $gray-100;
+				color: var(--wp-admin-theme-color);
+			}
+		}
+	}
+
+	.color-block-support-panel__item-group {
+		> div {
+			grid-column: span 2;
+			border-radius: inherit;
+		}
+	}
+}