@wordpress/block-editor 8.0.3 → 8.0.7

package/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js

@@ -0,0 +1,107 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../use-setting';
+import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
+
+/**
+ * Retrieves color and gradient related settings.
+ *
+ * The arrays for colors and gradients are made up of color palettes from each
+ * origin i.e. "Core", "Theme", and "User".
+ *
+ * @return {Object} Color and gradient related settings.
+ */
+export default function useMultipleOriginColorsAndGradients() {
+	const colorGradientSettings = useCommonSingleMultipleSelects();
+	const customColors = useSetting( 'color.palette.custom' );
+	const themeColors = useSetting( 'color.palette.theme' );
+	const defaultColors = useSetting( 'color.palette.default' );
+	const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' );
+
+	colorGradientSettings.colors = useMemo( () => {
+		const result = [];
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: themeColors,
+			} );
+		}
+		if (
+			shouldDisplayDefaultColors &&
+			defaultColors &&
+			defaultColors.length
+		) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				colors: defaultColors,
+			} );
+		}
+		if ( customColors && customColors.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: customColors,
+			} );
+		}
+		return result;
+	}, [ defaultColors, themeColors, customColors ] );
+
+	const customGradients = useSetting( 'color.gradients.custom' );
+	const themeGradients = useSetting( 'color.gradients.theme' );
+	const defaultGradients = useSetting( 'color.gradients.default' );
+	const shouldDisplayDefaultGradients = useSetting(
+		'color.defaultGradients'
+	);
+	colorGradientSettings.gradients = useMemo( () => {
+		const result = [];
+		if ( themeGradients && themeGradients.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				gradients: themeGradients,
+			} );
+		}
+		if (
+			shouldDisplayDefaultGradients &&
+			defaultGradients &&
+			defaultGradients.length
+		) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				gradients: defaultGradients,
+			} );
+		}
+		if ( customGradients && customGradients.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				gradients: customGradients,
+			} );
+		}
+		return result;
+	}, [ customGradients, themeGradients, defaultGradients ] );
+
+	return colorGradientSettings;
+}

package/src/components/default-block-appender/style.scss

@@ -1,3 +1,12 @@
+/**
+ * Default block appender.
+ *
+ * This component shows up in 3 places:
+ * - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
+ * - on the right, inside empty paragraphs
+ * - absolute positioned and blue inside nesting containers
+ */
+
 .block-editor-default-block-appender {
 	clear: both; // The appender doesn't scale well to sit next to floats, so clear them.
 
@@ -23,32 +32,97 @@
 	}
 }
 
-// Empty / default block side inserter.
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, // Empty paragraph, needs specificity to override inherited popover styles.
-.block-editor-default-block-appender .block-editor-inserter { // Empty appender.
+// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
+// that exists only on empty documents.
+.block-editor-default-block-appender .block-editor-inserter,
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter { // This needs specificity to override inherited popover styles.
 	position: absolute;
 	top: 0;
-	height: $button-size-small + $grid-unit-10;
+	right: 0;
+	line-height: 0;
 
-	.block-editor-inserter__toggle {
-		margin-right: 0;
+	&:disabled {
+		display: none;
 	}
 }
 
-// Left side.
-.block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender .block-editor-inserter {
-	@include break-small {
-		display: flex;
-		height: 100%;
+
+/**
+ * Fixed position appender.
+ * These styles apply to all in-canvas inserters that exist inside nesting containers.
+ */
+
+.block-editor-block-list__block .block-list-appender {
+	position: absolute;
+	list-style: none;
+	padding: 0;
+	z-index: z-index(".block-editor-block-list__block .block-list-appender");
+	bottom: 0;
+	right: 0;
+
+	// These rules needs extra specificity as it's affected by DOM rules.
+	&.block-list-appender {
+		margin: 0;
+		line-height: 0;
 	}
 
-	&:disabled {
+	.block-editor-default-block-appender {
+		height: $button-size-small;
+	}
+
+	// @todo: these are currently two separate components. Since we're now
+	// treating them the same, one or both can be retired.
+	.block-editor-inserter__toggle.components-button.has-icon,
+	.block-list-appender__toggle {
+		flex-direction: row;
+		box-shadow: none;
+		height: $button-size-small;
+		width: $button-size-small;
+
+		// Hide by default, then we unhide it when the selected block is a direct ancestor.
+		display: none;
+
+		// Important to override styles form Button component.
+		padding: 0 !important;
+
+		// Basic look
+		background: $gray-900;
+		color: $white;
+
+		&:hover {
+			color: $white;
+			background: var(--wp-admin-theme-color);
+		}
+	}
+
+	// This content only shows up inside the empty appender.
+	.block-editor-default-block-appender__content {
 		display: none;
 	}
+
+	// These could be avoided by employing a :not(:only-child) on the parent,
+	// but this should be more performant.
+	// @todo: These styles can almost certainly be refactored away we refactor
+	// the markup and classes of the component itself. The rules provide some
+	// baseline styles for when the block is the only one inside.
+	&:only-child {
+		position: relative;
+		right: auto;
+		align-self: center;
+		list-style: none;
+		line-height: inherit;
+
+		.block-editor-default-block-appender__content {
+			display: block;
+		}
+	}
 }
 
-.block-editor-default-block-appender.has-visible-prompt .block-editor-inserter,
-.block-editor-block-list__empty-block-inserter {
-	right: 0;
+// Unhide the inserter when you're in the exact container.
+.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender,
+.block-editor-block-list__block.is-selected > .block-list-appender {
+	.block-editor-inserter__toggle.components-button.has-icon,
+	.block-list-appender__toggle {
+		display: flex;
+	}
 }

package/src/components/gradients/use-gradient.js

@@ -6,7 +6,7 @@ import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -16,8 +16,6 @@ import { useBlockEditContext } from '../block-edit';
 import useSetting from '../use-setting';
 import { store as blockEditorStore } from '../../store';
 
-const EMPTY_ARRAY = [];
-
 export function __experimentalGetGradientClass( gradientSlug ) {
 	if ( ! gradientSlug ) {
 		return undefined;
@@ -67,7 +65,15 @@ export function __experimentalUseGradient( {
 } = {} ) {
 	const { clientId } = useBlockEditContext();
 
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	const { gradients: gradientsPerOrigin } = useSetting( 'color' ) || {};
+	const allGradients = useMemo(
+		() => [
+			...( gradientsPerOrigin?.custom || [] ),
+			...( gradientsPerOrigin?.theme || [] ),
+			...( gradientsPerOrigin?.default || [] ),
+		],
+		[ gradientsPerOrigin ]
+	);
 	const { gradient, customGradient } = useSelect(
 		( select ) => {
 			const { getBlockAttributes } = select( blockEditorStore );
@@ -83,7 +89,10 @@ export function __experimentalUseGradient( {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const setGradient = useCallback(
 		( newGradientValue ) => {
-			const slug = getGradientSlugByValue( gradients, newGradientValue );
+			const slug = getGradientSlugByValue(
+				allGradients,
+				newGradientValue
+			);
 			if ( slug ) {
 				updateBlockAttributes( clientId, {
 					[ gradientAttribute ]: slug,
@@ -96,13 +105,13 @@ export function __experimentalUseGradient( {
 				[ customGradientAttribute ]: newGradientValue,
 			} );
 		},
-		[ gradients, clientId, updateBlockAttributes ]
+		[ allGradients, clientId, updateBlockAttributes ]
 	);
 
 	const gradientClass = __experimentalGetGradientClass( gradient );
 	let gradientValue;
 	if ( gradient ) {
-		gradientValue = getGradientValueBySlug( gradients, gradient );
+		gradientValue = getGradientValueBySlug( allGradients, gradient );
 	} else {
 		gradientValue = customGradient;
 	}

package/src/components/inner-blocks/style.scss

@@ -4,16 +4,10 @@
 	&::after {
 		content: "";
 		position: absolute;
-		top: -$block-padding;
-		right: -$block-padding;
-		bottom: -$block-padding;
-		left: -$block-padding;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
 		z-index: z-index(".block-editor-block-list__layout.has-overlay::after");
 	}
 }
-
-// On fullwide blocks, don't go beyond the canvas.
-[data-align="full"] .has-overlay::after {
-	right: 0;
-	left: 0;
-}

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

@@ -117,9 +117,9 @@ export default function useSetting( path ) {
 			if ( experimentalFeaturesResult !== undefined ) {
 				if ( PATHS_WITH_MERGE[ normalizedPath ] ) {
 					return (
-						experimentalFeaturesResult.user ??
+						experimentalFeaturesResult.custom ??
 						experimentalFeaturesResult.theme ??
-						experimentalFeaturesResult.core
+						experimentalFeaturesResult.default
 					);
 				}
 				return experimentalFeaturesResult;

package/src/hooks/border-color.js

@@ -15,6 +15,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import ColorGradientControl from '../components/colors-gradients/control';
+import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import {
 	getColorClassName,
 	getColorObjectByColorValue,
@@ -46,13 +47,15 @@ export function BorderColorEdit( props ) {
 		attributes: { borderColor, style },
 		setAttributes,
 	} = props;
-	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const disableCustomColors = ! useSetting( 'color.custom' );
-	const disableCustomGradients = ! useSetting( 'color.customGradient' );
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const availableColors = colorGradientSettings.colors.reduce(
+		( colors, origin ) => colors.concat( origin.colors ),
+		[]
+	);
 	const [ colorValue, setColorValue ] = useState(
 		() =>
 			getColorObjectByAttributeValues(
-				colors,
+				availableColors,
 				borderColor,
 				style?.border?.color
 			)?.color
@@ -61,7 +64,10 @@ export function BorderColorEdit( props ) {
 	const onChangeColor = ( value ) => {
 		setColorValue( value );
 
-		const colorObject = getColorObjectByColorValue( colors, value );
+		const colorObject = getColorObjectByColorValue(
+			availableColors,
+			value
+		);
 		const newStyle = {
 			...style,
 			border: {
@@ -83,11 +89,10 @@ export function BorderColorEdit( props ) {
 		<ColorGradientControl
 			label={ __( 'Color' ) }
 			colorValue={ colorValue }
-			colors={ colors }
-			gradients={ undefined }
-			disableCustomColors={ disableCustomColors }
-			disableCustomGradients={ disableCustomGradients }
 			onColorChange={ onChangeColor }
+			clearable={ false }
+			__experimentalHasMultipleOrigins
+			{ ...colorGradientSettings }
 		/>
 	);
 }

package/src/hooks/color.js

@@ -10,7 +10,7 @@ import { isObject, setWith, clone } from 'lodash';
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
-import { useRef, useEffect, Platform } from '@wordpress/element';
+import { useRef, useEffect, useMemo, Platform } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -31,7 +31,6 @@ import ColorPanel from './color-panel';
 import useSetting from '../components/use-setting';
 
 export const COLOR_SUPPORT_KEY = 'color';
-const EMPTY_ARRAY = [];
 
 const hasColorSupport = ( blockType ) => {
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
@@ -217,13 +216,43 @@ function immutableSet( object, path, value ) {
  */
 export function ColorEdit( props ) {
 	const { name: blockName, attributes } = props;
-	const solids = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
-	const areCustomSolidsEnabled = useSetting( 'color.custom' );
-	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
-	const isLinkEnabled = useSetting( 'color.link' );
-	const isTextEnabled = useSetting( 'color.text' );
-	const isBackgroundEnabled = useSetting( 'color.background' );
+	const {
+		palette: solidsPerOrigin,
+		gradients: gradientsPerOrigin,
+		customGradient: areCustomGradientsEnabled,
+		custom: areCustomSolidsEnabled,
+		text: isTextEnabled,
+		background: isBackgroundEnabled,
+		link: isLinkEnabled,
+	} = useSetting( 'color' ) || {};
+
+	const solidsEnabled =
+		areCustomSolidsEnabled ||
+		! solidsPerOrigin?.theme ||
+		solidsPerOrigin?.theme?.length > 0;
+
+	const gradientsEnabled =
+		areCustomGradientsEnabled ||
+		! gradientsPerOrigin?.theme ||
+		gradientsPerOrigin?.theme?.length > 0;
+
+	const allSolids = useMemo(
+		() => [
+			...( solidsPerOrigin?.custom || [] ),
+			...( solidsPerOrigin?.theme || [] ),
+			...( solidsPerOrigin?.default || [] ),
+		],
+		[ solidsPerOrigin ]
+	);
+
+	const allGradients = useMemo(
+		() => [
+			...( gradientsPerOrigin?.custom || [] ),
+			...( gradientsPerOrigin?.theme || [] ),
+			...( gradientsPerOrigin?.default || [] ),
+		],
+		[ gradientsPerOrigin ]
+	);
 
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground
@@ -239,20 +268,15 @@ export function ColorEdit( props ) {
 	}
 
 	const hasLinkColor =
-		hasLinkColorSupport( blockName ) &&
-		isLinkEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		hasLinkColorSupport( blockName ) && isLinkEnabled && solidsEnabled;
 	const hasTextColor =
-		hasTextColorSupport( blockName ) &&
-		isTextEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		hasTextColorSupport( blockName ) && isTextEnabled && solidsEnabled;
 	const hasBackgroundColor =
 		hasBackgroundColorSupport( blockName ) &&
 		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		solidsEnabled;
 	const hasGradientColor =
-		hasGradientSupport( blockName ) &&
-		( gradients.length > 0 || areCustomGradientsEnabled );
+		hasGradientSupport( blockName ) && gradientsEnabled;
 
 	if (
 		! hasLinkColor &&
@@ -266,13 +290,13 @@ export function ColorEdit( props ) {
 	const { style, textColor, backgroundColor, gradient } = attributes;
 	let gradientValue;
 	if ( hasGradientColor && gradient ) {
-		gradientValue = getGradientValueBySlug( gradients, gradient );
+		gradientValue = getGradientValueBySlug( allGradients, gradient );
 	} else if ( hasGradientColor ) {
 		gradientValue = style?.color?.gradient;
 	}
 
 	const onChangeColor = ( name ) => ( value ) => {
-		const colorObject = getColorObjectByColorValue( solids, value );
+		const colorObject = getColorObjectByColorValue( allSolids, value );
 		const attributeName = name + 'Color';
 		const newStyle = {
 			...localAttributes.current.style,
@@ -296,7 +320,7 @@ export function ColorEdit( props ) {
 	};
 
 	const onChangeGradient = ( value ) => {
-		const slug = getGradientSlugByValue( gradients, value );
+		const slug = getGradientSlugByValue( allGradients, value );
 		let newAttributes;
 		if ( slug ) {
 			const newStyle = {
@@ -331,7 +355,7 @@ export function ColorEdit( props ) {
 	};
 
 	const onChangeLinkColor = ( value ) => {
-		const colorObject = getColorObjectByColorValue( solids, value );
+		const colorObject = getColorObjectByColorValue( allSolids, value );
 		const newLinkColorValue = colorObject?.slug
 			? `var:preset|color|${ colorObject.slug }`
 			: value;
@@ -360,7 +384,7 @@ export function ColorEdit( props ) {
 								label: __( 'Text color' ),
 								onColorChange: onChangeColor( 'text' ),
 								colorValue: getColorObjectByAttributeValues(
-									solids,
+									allSolids,
 									textColor,
 									style?.color?.text
 								).color,
@@ -375,7 +399,7 @@ export function ColorEdit( props ) {
 									? onChangeColor( 'background' )
 									: undefined,
 								colorValue: getColorObjectByAttributeValues(
-									solids,
+									allSolids,
 									backgroundColor,
 									style?.color?.background
 								).color,
@@ -392,7 +416,7 @@ export function ColorEdit( props ) {
 								label: __( 'Link Color' ),
 								onColorChange: onChangeLinkColor,
 								colorValue: getLinkColorFromAttributeValue(
-									solids,
+									allSolids,
 									style?.elements?.link?.color?.text
 								),
 								clearable: !! style?.elements?.link?.color
@@ -417,7 +441,15 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
 		const { backgroundColor, textColor } = attributes;
-		const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
+		const { palette: solidsPerOrigin } = useSetting( 'color' ) || {};
+		const colors = useMemo(
+			() => [
+				...( solidsPerOrigin?.custom || [] ),
+				...( solidsPerOrigin?.theme || [] ),
+				...( solidsPerOrigin?.default || [] ),
+			],
+			[ solidsPerOrigin ]
+		);
 		if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) {
 			return <BlockListBlock { ...props } />;
 		}

package/src/hooks/typography.js

@@ -231,7 +231,7 @@ export function TypographyPanel( props ) {
 	);
 }
 
-const hasTypographySupport = ( blockName ) => {
+export const hasTypographySupport = ( blockName ) => {
 	return TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
 		hasBlockSupport( blockName, key )
 	);

package/src/hooks/use-color-props.js

@@ -3,6 +3,11 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -24,8 +29,6 @@ import useSetting from '../components/use-setting';
 // block support is being skipped for a block but the color related CSS classes
 // & styles still need to be generated so they can be applied to inner elements.
 
-const EMPTY_ARRAY = [];
-
 /**
  * Provides the CSS class names and inline styles for a block's color support
  * attributes.
@@ -84,8 +87,24 @@ export function getColorClassesAndStyles( attributes ) {
 export function useColorProps( attributes ) {
 	const { backgroundColor, textColor, gradient } = attributes;
 
-	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	const { palette: solidsPerOrigin, gradients: gradientsPerOrigin } =
+		useSetting( 'color' ) || {};
+	const colors = useMemo(
+		() => [
+			...( solidsPerOrigin?.custom || [] ),
+			...( solidsPerOrigin?.theme || [] ),
+			...( solidsPerOrigin?.default || [] ),
+		],
+		[ solidsPerOrigin ]
+	);
+	const gradients = useMemo(
+		() => [
+			...( gradientsPerOrigin?.custom || [] ),
+			...( gradientsPerOrigin?.theme || [] ),
+			...( gradientsPerOrigin?.default || [] ),
+		],
+		[ gradientsPerOrigin ]
+	);
 
 	const colorProps = getColorClassesAndStyles( attributes );
 

package/src/store/selectors.js

@@ -1643,22 +1643,19 @@ export const getInserterItems = createSelector(
 			? getReusableBlocks( state ).map( buildReusableBlockInserterItem )
 			: [];
 
-		// Exclude any block type item that is to be replaced by a default
-		// variation.
-		const visibleBlockTypeInserterItems = blockTypeInserterItems.filter(
-			( { variations = [] } ) =>
-				! variations.some( ( { isDefault } ) => isDefault )
-		);
-
-		const blockVariations = [];
-		// Show all available blocks with variations
-		for ( const item of blockTypeInserterItems ) {
+		const items = blockTypeInserterItems.reduce( ( accumulator, item ) => {
 			const { variations = [] } = item;
+			// Exclude any block type item that is to be replaced by a default variation
+			if ( ! variations.some( ( { isDefault } ) => isDefault ) ) {
+				accumulator.push( item );
+			}
 			if ( variations.length ) {
 				const variationMapper = getItemFromVariation( state, item );
-				blockVariations.push( ...variations.map( variationMapper ) );
+				accumulator.push( ...variations.map( variationMapper ) );
 			}
-		}
+			return accumulator;
+		}, [] );
+
 		// Ensure core blocks are prioritized in the returned results,
 		// because third party blocks can be registered earlier than
 		// the core blocks (usually by using the `init` action),
@@ -1671,20 +1668,11 @@ export const getInserterItems = createSelector(
 			type.push( block );
 			return blocks;
 		};
-		const items = visibleBlockTypeInserterItems.reduce( groupByType, {
-			core: [],
-			noncore: [],
-		} );
-		const variations = blockVariations.reduce( groupByType, {
-			core: [],
-			noncore: [],
-		} );
-		const sortedBlockTypes = [
-			...items.core,
-			...variations.core,
-			...items.noncore,
-			...variations.noncore,
-		];
+		const {
+			core: coreItems,
+			noncore: nonCoreItems,
+		} = items.reduce( groupByType, { core: [], noncore: [] } );
+		const sortedBlockTypes = [ ...coreItems, ...nonCoreItems ];
 		return [ ...sortedBlockTypes, ...reusableBlockInserterItems ];
 	},
 	( state, rootClientId ) => [