@wordpress/block-editor 8.1.0 → 8.1.2

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
  *
@@ -374,6 +489,11 @@ export function ColorEdit( props ) {
 	const enableContrastChecking =
 		Platform.OS === 'web' && ! gradient && ! style?.color?.gradient;
 
+	const defaultColorControls = getBlockSupport( props.name, [
+		COLOR_SUPPORT_KEY,
+		'__experimentalDefaultControls',
+	] );
+
 	return (
 		<ColorPanel
 			enableContrastChecking={ enableContrastChecking }
@@ -390,6 +510,10 @@ export function ColorEdit( props ) {
 									textColor,
 									style?.color?.text
 								).color,
+								isShownByDefault: defaultColorControls?.text,
+								hasValue: () => hasColor( 'text' )( props ),
+								onDeselect: () => resetTextColor( props ),
+								resetAllFilter: resetAllTextFilter,
 							},
 					  ]
 					: [] ),
@@ -409,6 +533,13 @@ export function ColorEdit( props ) {
 								onGradientChange: hasGradientColor
 									? onChangeGradient
 									: undefined,
+								isShownByDefault:
+									defaultColorControls?.background,
+								hasValue: () =>
+									hasColor( 'background' )( props ),
+								onDeselect: () =>
+									resetBackgroundAndGradient( props ),
+								resetAllFilter: clearBackgroundAndGradient,
 							},
 					  ]
 					: [] ),
@@ -423,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,
 							},
 					  ]
 					: [] ),
@@ -485,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',
@@ -508,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;
+		}
+	}
+}

package/src/hooks/font-size.js

@@ -15,7 +15,7 @@ import {
 	getFontSizeObjectByValue,
 	FontSizePicker,
 } from '../components/font-sizes';
-import { cleanEmptyObject } from './utils';
+import { cleanEmptyObject, transformStyles } from './utils';
 import useSetting from '../components/use-setting';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
@@ -255,6 +255,28 @@ const withFontSizeInlineStyles = createHigherOrderComponent(
 	'withFontSizeInlineStyles'
 );
 
+const MIGRATION_PATHS = {
+	fontSize: [ [ 'fontSize' ], [ 'style', 'typography', 'fontSize' ] ],
+};
+
+export function addTransforms( result, source, index, results ) {
+	const destinationBlockType = result.name;
+	const activeSupports = {
+		fontSize: hasBlockSupport(
+			destinationBlockType,
+			FONT_SIZE_SUPPORT_KEY
+		),
+	};
+	return transformStyles(
+		activeSupports,
+		MIGRATION_PATHS,
+		result,
+		source,
+		index,
+		results
+	);
+}
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/font/addAttribute',
@@ -274,3 +296,9 @@ addFilter(
 	'core/font-size/with-font-size-inline-styles',
 	withFontSizeInlineStyles
 );
+
+addFilter(
+	'blocks.switchToBlockType.transformedBlock',
+	'core/font-size/addTransforms',
+	addTransforms
+);

package/src/hooks/typography.native.js

@@ -34,9 +34,7 @@ export function TypographyPanel( props ) {
 	const isDisabled = useIsTypographyDisabled( props );
 	const isSupported = hasTypographySupport( props.name );
 
-	// only enable TypographyPanel for development
-	// eslint-disable-next-line no-undef
-	if ( isDisabled || ! isSupported || ! __DEV__ ) return null;
+	if ( isDisabled || ! isSupported ) return null;
 
 	return (
 		<InspectorControls>

package/src/hooks/utils.js

@@ -1,7 +1,18 @@
 /**
  * External dependencies
  */
-import { pickBy, isEmpty, isObject, identity, mapValues } from 'lodash';
+import {
+	pickBy,
+	isEmpty,
+	isObject,
+	identity,
+	mapValues,
+	forEach,
+	get,
+	setWith,
+	clone,
+	every,
+} from 'lodash';
 
 /**
  * Removed falsy values from nested object.
@@ -19,3 +30,60 @@ export const cleanEmptyObject = ( object ) => {
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };
+
+export function immutableSet( object, path, value ) {
+	return setWith( object ? clone( object ) : {}, path, value, clone );
+}
+
+export function transformStyles(
+	activeSupports,
+	migrationPaths,
+	result,
+	source,
+	index,
+	results
+) {
+	// If there are no active supports return early.
+	if ( every( activeSupports, ( isActive ) => ! isActive ) ) {
+		return result;
+	}
+	// If the condition verifies we are probably in the presence of a wrapping transform
+	// e.g: nesting paragraphs in a group or columns and in that case the styles should not be transformed.
+	if ( results.length === 1 && result.innerBlocks.length === source.length ) {
+		return result;
+	}
+	// For cases where we have a transform from one block to multiple blocks
+	// or multiple blocks to one block we apply the styles of the first source block
+	// to the result(s).
+	let referenceBlockAttributes = source[ 0 ]?.attributes;
+	// If we are in presence of transform between more than one block in the source
+	// that has more than one block in the result
+	// we apply the styles on source N to the result N,
+	// if source N does not exists we do nothing.
+	if ( results.length > 1 && source.length > 1 ) {
+		if ( source[ index ] ) {
+			referenceBlockAttributes = source[ index ]?.attributes;
+		} else {
+			return result;
+		}
+	}
+	let returnBlock = result;
+	forEach( activeSupports, ( isActive, support ) => {
+		if ( isActive ) {
+			migrationPaths[ support ].forEach( ( path ) => {
+				const styleValue = get( referenceBlockAttributes, path );
+				if ( styleValue ) {
+					returnBlock = {
+						...returnBlock,
+						attributes: immutableSet(
+							returnBlock.attributes,
+							path,
+							styleValue
+						),
+					};
+				}
+			} );
+		}
+	} );
+	return returnBlock;
+}

package/src/style.scss

@@ -57,6 +57,7 @@
 @import "./hooks/border.scss";
 @import "./hooks/dimensions.scss";
 @import "./hooks/typography.scss";
+@import "./hooks/color.scss";
 
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";

package/build/components/preserve-scroll-in-reorder/index.js

@@ -1,22 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = PreserveScrollInReorder;
-
-var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
-
-/**
- * WordPress dependencies
- */
-function PreserveScrollInReorder() {
-  (0, _deprecated.default)('PreserveScrollInReorder component', {
-    since: '5.4',
-    hint: 'This behavior is now built-in the block list'
-  });
-  return null;
-}
-//# sourceMappingURL=index.js.map

package/build/components/preserve-scroll-in-reorder/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/preserve-scroll-in-reorder/index.js"],"names":["PreserveScrollInReorder","since","hint"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGe,SAASA,uBAAT,GAAmC;AACjD,2BAAY,mCAAZ,EAAiD;AAChDC,IAAAA,KAAK,EAAE,KADyC;AAEhDC,IAAAA,IAAI,EAAE;AAF0C,GAAjD;AAIA,SAAO,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\nexport default function PreserveScrollInReorder() {\n\tdeprecated( 'PreserveScrollInReorder component', {\n\t\tsince: '5.4',\n\t\thint: 'This behavior is now built-in the block list',\n\t} );\n\treturn null;\n}\n"]}

package/build-module/components/preserve-scroll-in-reorder/index.js

@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-export default function PreserveScrollInReorder() {
-  deprecated('PreserveScrollInReorder component', {
-    since: '5.4',
-    hint: 'This behavior is now built-in the block list'
-  });
-  return null;
-}
-//# sourceMappingURL=index.js.map

package/build-module/components/preserve-scroll-in-reorder/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/preserve-scroll-in-reorder/index.js"],"names":["deprecated","PreserveScrollInReorder","since","hint"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,uBAAvB;AAEA,eAAe,SAASC,uBAAT,GAAmC;AACjDD,EAAAA,UAAU,CAAE,mCAAF,EAAuC;AAChDE,IAAAA,KAAK,EAAE,KADyC;AAEhDC,IAAAA,IAAI,EAAE;AAF0C,GAAvC,CAAV;AAIA,SAAO,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\nexport default function PreserveScrollInReorder() {\n\tdeprecated( 'PreserveScrollInReorder component', {\n\t\tsince: '5.4',\n\t\thint: 'This behavior is now built-in the block list',\n\t} );\n\treturn null;\n}\n"]}

package/src/components/preserve-scroll-in-reorder/index.js

@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-
-export default function PreserveScrollInReorder() {
-	deprecated( 'PreserveScrollInReorder component', {
-		since: '5.4',
-		hint: 'This behavior is now built-in the block list',
-	} );
-	return null;
-}