@wordpress/block-editor 12.9.0 → 12.9.1-next.5a1d1283.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.9.0",
+	"version": "12.9.1-next.5a1d1283.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,36 +35,36 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.41.0",
-		"@wordpress/api-fetch": "^6.38.0",
-		"@wordpress/blob": "^3.41.0",
-		"@wordpress/blocks": "^12.18.0",
-		"@wordpress/commands": "^0.12.0",
-		"@wordpress/components": "^25.7.0",
-		"@wordpress/compose": "^6.18.0",
-		"@wordpress/data": "^9.11.0",
-		"@wordpress/date": "^4.41.0",
-		"@wordpress/deprecated": "^3.41.0",
-		"@wordpress/dom": "^3.41.0",
-		"@wordpress/element": "^5.18.0",
-		"@wordpress/escape-html": "^2.41.0",
-		"@wordpress/hooks": "^3.41.0",
-		"@wordpress/html-entities": "^3.41.0",
-		"@wordpress/i18n": "^4.41.0",
-		"@wordpress/icons": "^9.32.0",
-		"@wordpress/is-shallow-equal": "^4.41.0",
-		"@wordpress/keyboard-shortcuts": "^4.18.0",
-		"@wordpress/keycodes": "^3.41.0",
-		"@wordpress/notices": "^4.9.0",
-		"@wordpress/preferences": "^3.18.0",
-		"@wordpress/private-apis": "^0.23.0",
-		"@wordpress/rich-text": "^6.18.0",
-		"@wordpress/shortcode": "^3.41.0",
-		"@wordpress/style-engine": "^1.24.0",
-		"@wordpress/token-list": "^2.41.0",
-		"@wordpress/url": "^3.42.0",
-		"@wordpress/warning": "^2.41.0",
-		"@wordpress/wordcount": "^3.41.0",
+		"@wordpress/a11y": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/api-fetch": "^6.38.1-next.5a1d1283.0",
+		"@wordpress/blob": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/blocks": "^12.18.1-next.5a1d1283.0",
+		"@wordpress/commands": "^0.12.1-next.5a1d1283.0",
+		"@wordpress/components": "^26.0.1-next.5a1d1283.0",
+		"@wordpress/compose": "^6.18.1-next.5a1d1283.0",
+		"@wordpress/data": "^9.11.1-next.5a1d1283.0",
+		"@wordpress/date": "^4.41.1-next.5a1d1283.0",
+		"@wordpress/deprecated": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/dom": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/element": "^5.18.1-next.5a1d1283.0",
+		"@wordpress/escape-html": "^2.41.1-next.5a1d1283.0",
+		"@wordpress/hooks": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/html-entities": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/i18n": "^4.41.1-next.5a1d1283.0",
+		"@wordpress/icons": "^9.32.1-next.5a1d1283.0",
+		"@wordpress/is-shallow-equal": "^4.41.1-next.5a1d1283.0",
+		"@wordpress/keyboard-shortcuts": "^4.18.1-next.5a1d1283.0",
+		"@wordpress/keycodes": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/notices": "^4.9.1-next.5a1d1283.0",
+		"@wordpress/preferences": "^3.18.1-next.5a1d1283.0",
+		"@wordpress/private-apis": "^0.23.1-next.5a1d1283.0",
+		"@wordpress/rich-text": "^6.18.1-next.5a1d1283.0",
+		"@wordpress/shortcode": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/style-engine": "^1.24.1-next.5a1d1283.0",
+		"@wordpress/token-list": "^2.41.1-next.5a1d1283.0",
+		"@wordpress/url": "^3.42.1-next.5a1d1283.0",
+		"@wordpress/warning": "^2.41.1-next.5a1d1283.0",
+		"@wordpress/wordcount": "^3.41.1-next.5a1d1283.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5eac1734bcdca2301fdd37ec8cfe2a45e722a2c4"
+	"gitHead": "fa0b66987dab5a15f38663e06036d09bccffaa4b"
 }

package/src/components/link-control/index.js

@@ -475,5 +475,6 @@ function LinkControl( {
 }
 
 LinkControl.ViewerFill = ViewerFill;
+LinkControl.DEFAULT_LINK_SETTINGS = DEFAULT_LINK_SETTINGS;
 
 export default LinkControl;

package/src/components/link-control/settings.js

@@ -26,6 +26,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 			label={ setting.title }
 			onChange={ handleSettingChange( setting ) }
 			checked={ value ? !! value[ setting.id ] : false }
+			help={ setting?.help }
 		/>
 	) );
 

package/src/components/link-control/style.scss

@@ -401,19 +401,19 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__setting {
-	margin-bottom: $grid-unit-20;
+	margin-bottom: 0;
 	flex: 1;
 	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-30;
 
+	.components-base-control__field {
+		display: flex; // don't allow label to wrap under checkbox.
+	}
+
 	// Cancel left margin inherited from WP Admin Forms CSS.
 	input {
 		margin-left: 0;
 	}
 
-	&.block-editor-link-control__setting:last-child {
-		margin-bottom: 0;
-	}
-
 	.is-preview & {
 		padding: 20px $grid-unit-10 $grid-unit-10 0;
 	}

package/src/hooks/style.js

@@ -34,6 +34,7 @@ import {
 } from './dimensions';
 import useDisplayBlockControls from '../components/use-display-block-controls';
 import { shouldSkipSerialization } from './utils';
+import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 
 const styleSupportKeys = [
@@ -371,6 +372,18 @@ export const withBlockControls = createHigherOrderComponent(
 	'withToolbarControls'
 );
 
+// Defines which element types are supported, including their hover styles or
+// any other elements that have been included under a single element type
+// e.g. heading and h1-h6.
+const elementTypes = [
+	{ elementType: 'button' },
+	{ elementType: 'link', pseudo: [ ':hover' ] },
+	{
+		elementType: 'heading',
+		elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
+	},
+];
+
 /**
  * Override the default block element to include elements styles.
  *
@@ -383,47 +396,84 @@ const withElementsStyles = createHigherOrderComponent(
 			BlockListBlock
 		) }`;
 
-		const skipLinkColorSerialization = shouldSkipSerialization(
-			props.name,
-			COLOR_SUPPORT_KEY,
-			'link'
-		);
+		// The .editor-styles-wrapper selector is required on elements styles. As it is
+		// added to all other editor styles, not providing it causes reset and global
+		// styles to override element styles because of higher specificity.
+		const baseElementSelector = `.editor-styles-wrapper .${ blockElementsContainerIdentifier }`;
+		const blockElementStyles = props.attributes.style?.elements;
 
 		const styles = useMemo( () => {
-			// The .editor-styles-wrapper selector is required on elements styles. As it is
-			// added to all other editor styles, not providing it causes reset and global
-			// styles to override element styles because of higher specificity.
-			const elements = [
-				{
-					styles: ! skipLinkColorSerialization
-						? props.attributes.style?.elements?.link
-						: undefined,
-					selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS.link }`,
-				},
-				{
-					styles: ! skipLinkColorSerialization
-						? props.attributes.style?.elements?.link?.[ ':hover' ]
-						: undefined,
-					selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS.link }:hover`,
-				},
-			];
-			const elementCssRules = [];
-			for ( const { styles: elementStyles, selector } of elements ) {
+			if ( ! blockElementStyles ) {
+				return;
+			}
+
+			const elementCSSRules = [];
+
+			elementTypes.forEach( ( { elementType, pseudo, elements } ) => {
+				const skipSerialization = shouldSkipSerialization(
+					props.name,
+					COLOR_SUPPORT_KEY,
+					elementType
+				);
+
+				if ( skipSerialization ) {
+					return;
+				}
+
+				const elementStyles = blockElementStyles?.[ elementType ];
+
+				// Process primary element type styles.
 				if ( elementStyles ) {
-					const cssRule = compileCSS( elementStyles, {
-						selector,
+					const selector = scopeSelector(
+						baseElementSelector,
+						ELEMENTS[ elementType ]
+					);
+
+					elementCSSRules.push(
+						compileCSS( elementStyles, { selector } )
+					);
+
+					// Process any interactive states for the element type.
+					if ( pseudo ) {
+						pseudo.forEach( ( pseudoSelector ) => {
+							if ( elementStyles[ pseudoSelector ] ) {
+								elementCSSRules.push(
+									compileCSS(
+										elementStyles[ pseudoSelector ],
+										{
+											selector: scopeSelector(
+												baseElementSelector,
+												`${ ELEMENTS[ elementType ] }${ pseudoSelector }`
+											),
+										}
+									)
+								);
+							}
+						} );
+					}
+				}
+
+				// Process related elements e.g. h1-h6 for headings
+				if ( elements ) {
+					elements.forEach( ( element ) => {
+						if ( blockElementStyles[ element ] ) {
+							elementCSSRules.push(
+								compileCSS( blockElementStyles[ element ], {
+									selector: scopeSelector(
+										baseElementSelector,
+										ELEMENTS[ element ]
+									),
+								} )
+							);
+						}
 					} );
-					elementCssRules.push( cssRule );
 				}
-			}
-			return elementCssRules.length > 0
-				? elementCssRules.join( '' )
+			} );
+
+			return elementCSSRules.length > 0
+				? elementCSSRules.join( '' )
 				: undefined;
-		}, [
-			props.attributes.style?.elements,
-			blockElementsContainerIdentifier,
-			skipLinkColorSerialization,
-		] );
+		}, [ baseElementSelector, blockElementStyles, props.name ] );
 
 		const element = useContext( BlockList.__unstableElementContext );
 

package/src/hooks/utils.js

@@ -166,6 +166,8 @@ export function useBlockSettings( name, parentLayout ) {
 	const isBackgroundEnabled = useSetting( 'color.background' );
 	const isLinkEnabled = useSetting( 'color.link' );
 	const isTextEnabled = useSetting( 'color.text' );
+	const isHeadingEnabled = useSetting( 'color.heading' );
+	const isButtonEnabled = useSetting( 'color.button' );
 
 	const rawSettings = useMemo( () => {
 		return {
@@ -193,6 +195,8 @@ export function useBlockSettings( name, parentLayout ) {
 				customDuotone,
 				background: isBackgroundEnabled,
 				link: isLinkEnabled,
+				heading: isHeadingEnabled,
+				button: isButtonEnabled,
 				text: isTextEnabled,
 			},
 			typography: {