@wordpress/edit-site 5.0.0 → 5.2.0

package/src/components/global-styles/use-global-styles-output.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty, kebabCase, pickBy, set } from 'lodash';
+import { get, isEmpty, kebabCase, set } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -10,6 +10,7 @@ import {
 	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 	getBlockTypes,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
@@ -171,6 +172,29 @@ function flattenTree( input = {}, prefix, token ) {
 	return result;
 }
 
+/**
+ * Gets variation selector string from feature selector.
+ *
+ * @param {string} featureSelector        The feature selector.
+ *
+ * @param {string} styleVariationSelector The style variation selector.
+ * @return {string} Combined selector string.
+ *
+ */
+function concatFeatureVariationSelectorString(
+	featureSelector,
+	styleVariationSelector
+) {
+	const featureSelectors = featureSelector.split( ',' );
+	const combinedSelectors = [];
+	featureSelectors.forEach( ( selector ) => {
+		combinedSelectors.push(
+			`${ styleVariationSelector.trim() }${ selector.trim() }`
+		);
+	} );
+	return combinedSelectors.join( ', ' );
+}
+
 /**
  * Transform given style tree into a set of style declarations.
  *
@@ -449,17 +473,19 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	}
 
 	const pickStyleKeys = ( treeToPickFrom ) =>
-		pickBy( treeToPickFrom, ( value, key ) =>
-			[
-				'border',
-				'color',
-				'dimensions',
-				'spacing',
-				'typography',
-				'filter',
-				'outline',
-				'shadow',
-			].includes( key )
+		Object.fromEntries(
+			Object.entries( treeToPickFrom ?? {} ).filter( ( [ key ] ) =>
+				[
+					'border',
+					'color',
+					'dimensions',
+					'spacing',
+					'typography',
+					'filter',
+					'outline',
+					'shadow',
+				].includes( key )
+			)
 		);
 
 	// Top-level.
@@ -484,6 +510,16 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	Object.entries( tree.styles?.blocks ?? {} ).forEach(
 		( [ blockName, node ] ) => {
 			const blockStyles = pickStyleKeys( node );
+
+			if ( node?.variations ) {
+				const variations = {};
+				Object.keys( node.variations ).forEach( ( variation ) => {
+					variations[ variation ] = pickStyleKeys(
+						node.variations[ variation ]
+					);
+				} );
+				blockStyles.variations = variations;
+			}
 			if (
 				!! blockStyles &&
 				!! blockSelectors?.[ blockName ]?.selector
@@ -499,6 +535,8 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 					styles: blockStyles,
 					featureSelectors:
 						blockSelectors[ blockName ].featureSelectors,
+					styleVariationSelectors:
+						blockSelectors[ blockName ].styleVariationSelectors,
 				} );
 			}
 
@@ -647,6 +685,7 @@ export const toStyles = (
 			fallbackGapValue,
 			hasLayoutSupport,
 			featureSelectors,
+			styleVariationSelectors,
 		} ) => {
 			// Process styles for block support features with custom feature level
 			// CSS selectors set.
@@ -673,6 +712,69 @@ export const toStyles = (
 				);
 			}
 
+			if ( styleVariationSelectors ) {
+				Object.entries( styleVariationSelectors ).forEach(
+					( [ styleVariationName, styleVariationSelector ] ) => {
+						if ( styles?.variations?.[ styleVariationName ] ) {
+							// If the block uses any custom selectors for block support, add those first.
+							if ( featureSelectors ) {
+								Object.entries( featureSelectors ).forEach(
+									( [ featureName, featureSelector ] ) => {
+										if (
+											styles?.variations?.[
+												styleVariationName
+											]?.[ featureName ]
+										) {
+											const featureStyles = {
+												[ featureName ]:
+													styles.variations[
+														styleVariationName
+													][ featureName ],
+											};
+											const featureDeclarations =
+												getStylesDeclarations(
+													featureStyles
+												);
+											delete styles.variations[
+												styleVariationName
+											][ featureName ];
+
+											if (
+												!! featureDeclarations.length
+											) {
+												ruleset =
+													ruleset +
+													`${ concatFeatureVariationSelectorString(
+														featureSelector,
+														styleVariationSelector
+													) }{${ featureDeclarations.join(
+														';'
+													) } }`;
+											}
+										}
+									}
+								);
+							}
+							// Otherwise add regular selectors.
+							const styleVariationDeclarations =
+								getStylesDeclarations(
+									styles?.variations?.[ styleVariationName ],
+									styleVariationSelector,
+									useRootPaddingAlign,
+									tree
+								);
+							if ( !! styleVariationDeclarations.length ) {
+								ruleset =
+									ruleset +
+									`${ styleVariationSelector }{${ styleVariationDeclarations.join(
+										';'
+									) }}`;
+							}
+						}
+					}
+				);
+			}
+
 			const duotoneStyles = {};
 			if ( styles?.filter ) {
 				duotoneStyles.filter = styles.filter;
@@ -802,7 +904,7 @@ export function toSvgFilters( tree, blockSelectors ) {
 	} );
 }
 
-export const getBlockSelectors = ( blockTypes ) => {
+export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
 		const name = blockType.name;
@@ -815,6 +917,15 @@ export const getBlockSelectors = ( blockTypes ) => {
 		const fallbackGapValue =
 			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
 
+		const blockStyleVariations = getBlockStyles( name );
+		const styleVariationSelectors = {};
+		if ( blockStyleVariations?.length ) {
+			blockStyleVariations.forEach( ( variation ) => {
+				const styleVariationSelector = `.is-style-${ variation.name }${ selector }`;
+				styleVariationSelectors[ variation.name ] =
+					styleVariationSelector;
+			} );
+		}
 		// For each block support feature add any custom selectors.
 		const featureSelectors = {};
 		Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
@@ -840,6 +951,10 @@ export const getBlockSelectors = ( blockTypes ) => {
 			hasLayoutSupport,
 			name,
 			selector,
+			styleVariationSelectors: Object.keys( styleVariationSelectors )
+				.length
+				? styleVariationSelectors
+				: undefined,
 		};
 	} );
 
@@ -892,12 +1007,19 @@ export function useGlobalStylesOutput() {
 		return !! getSettings().disableLayoutStyles;
 	} );
 
+	const getBlockStyles = useSelect( ( select ) => {
+		return select( blocksStore ).getBlockStyles;
+	}, [] );
+
 	return useMemo( () => {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
 			return [];
 		}
 		mergedConfig = updateConfigWithSeparator( mergedConfig );
-		const blockSelectors = getBlockSelectors( getBlockTypes() );
+		const blockSelectors = getBlockSelectors(
+			getBlockTypes(),
+			getBlockStyles
+		);
 		const customProperties = toCustomProperties(
 			mergedConfig,
 			blockSelectors
@@ -909,6 +1031,7 @@ export function useGlobalStylesOutput() {
 			hasFallbackGapSupport,
 			disableLayoutStyles
 		);
+
 		const filters = toSvgFilters( mergedConfig, blockSelectors );
 		const stylesheets = [
 			{

package/src/components/global-styles/utils.js

@@ -86,20 +86,60 @@ export const PRESET_METADATA = [
 	},
 ];
 
-const STYLE_PATH_TO_CSS_VAR_INFIX = {
+export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
 	'elements.link.color.text': 'color',
+	'elements.link.:hover.color.text': 'color',
+	'elements.link.typography.fontFamily': 'font-family',
+	'elements.link.typography.fontSize': 'font-size',
 	'elements.button.color.text': 'color',
-	'elements.button.backgroundColor': 'background-color',
+	'elements.button.color.background': 'color',
+	'elements.button.typography.fontFamily': 'font-family',
+	'elements.button.typography.fontSize': 'font-size',
 	'elements.heading.color': 'color',
-	'elements.heading.backgroundColor': 'background-color',
+	'elements.heading.color.background': 'color',
+	'elements.heading.typography.fontFamily': 'font-family',
 	'elements.heading.gradient': 'gradient',
+	'elements.heading.color.gradient': 'gradient',
+	'elements.h1.color': 'color',
+	'elements.h1.color.background': 'color',
+	'elements.h1.typography.fontFamily': 'font-family',
+	'elements.h1.color.gradient': 'gradient',
+	'elements.h2.color': 'color',
+	'elements.h2.color.background': 'color',
+	'elements.h2.typography.fontFamily': 'font-family',
+	'elements.h2.color.gradient': 'gradient',
+	'elements.h3.color': 'color',
+	'elements.h3.color.background': 'color',
+	'elements.h3.typography.fontFamily': 'font-family',
+	'elements.h3.color.gradient': 'gradient',
+	'elements.h4.color': 'color',
+	'elements.h4.color.background': 'color',
+	'elements.h4.typography.fontFamily': 'font-family',
+	'elements.h4.color.gradient': 'gradient',
+	'elements.h5.color': 'color',
+	'elements.h5.color.background': 'color',
+	'elements.h5.typography.fontFamily': 'font-family',
+	'elements.h5.color.gradient': 'gradient',
+	'elements.h6.color': 'color',
+	'elements.h6.color.background': 'color',
+	'elements.h6.typography.fontFamily': 'font-family',
+	'elements.h6.color.gradient': 'gradient',
 	'color.gradient': 'gradient',
 	'typography.fontSize': 'font-size',
 	'typography.fontFamily': 'font-family',
 };
 
+// A static list of block attributes that store global style preset slugs.
+export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
+	'color.background': 'backgroundColor',
+	'color.text': 'textColor',
+	'color.gradient': 'gradient',
+	'typography.fontSize': 'fontSize',
+	'typography.fontFamily': 'fontFamily',
+};
+
 function findInPresetsBy(
 	features,
 	blockName,
@@ -324,3 +364,16 @@ export function scopeSelector( scope, selector ) {
 
 	return selectorsScoped.join( ', ' );
 }
+
+/**
+ *
+ * @param {string} path The variation path in the Global Styles tree.
+ *
+ * @return {string} The variation class name.
+ */
+export function getVariationClassNameFromPath( path ) {
+	if ( ! path ) {
+		return '';
+	}
+	return `is-style-${ path.split( '.' )[ 1 ] }`;
+}

package/src/components/global-styles/variations-panel.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+
+import { NavigationButtonAsItem } from './navigation-button';
+import ContextMenu from './context-menu';
+
+function getCoreBlockStyles( blockStyles ) {
+	return blockStyles?.filter( ( style ) => style.source === 'block' );
+}
+
+export function useHasVariationsPanel( name, parentMenu = '' ) {
+	const isInsideVariationsPanel = parentMenu.includes( 'variations' );
+	const blockStyles = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+	const coreBlockStyles = getCoreBlockStyles( blockStyles );
+	return !! coreBlockStyles?.length && ! isInsideVariationsPanel;
+}
+
+export function VariationsPanel( { name } ) {
+	const blockStyles = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+	const coreBlockStyles = getCoreBlockStyles( blockStyles );
+
+	return (
+		<ItemGroup isBordered isSeparated>
+			{ coreBlockStyles.map( ( style, index ) => {
+				if ( style?.isDefault ) {
+					return null;
+				}
+				return (
+					<NavigationButtonAsItem
+						key={ index }
+						path={
+							'/blocks/' +
+							encodeURIComponent( name ) +
+							'/variations/' +
+							encodeURIComponent( style.name )
+						}
+						aria-label={ style.label }
+					>
+						{ style.label }
+					</NavigationButtonAsItem>
+				);
+			} ) }
+		</ItemGroup>
+	);
+}
+
+export function VariationPanel( { blockName, styleName } ) {
+	return (
+		<ContextMenu
+			parentMenu={
+				'/blocks/' +
+				encodeURIComponent( blockName ) +
+				'/variations/' +
+				encodeURIComponent( styleName )
+			}
+			name={ blockName }
+		/>
+	);
+}

package/src/components/header-edit-mode/document-actions/index.js

@@ -25,16 +25,13 @@ import {
 	useBlockDisplayInformation,
 	BlockIcon,
 } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
 import TemplateDetails from '../../template-details';
-import { store as editSiteStore } from '../../../store';
+import useEditedEntityRecord from '../../use-edited-entity-record';
 
 function getBlockDisplayText( block ) {
 	if ( block ) {
@@ -70,36 +67,15 @@ function useSecondaryText() {
 }
 
 export default function DocumentActions() {
-	const { showIconLabels, entityTitle, template, templateType, isLoaded } =
-		useSelect( ( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const { __experimentalGetTemplateInfo: getTemplateInfo } =
-				select( editorStore );
-			const postType = getEditedPostType();
-			const postId = getEditedPostId();
-			const record = getEditedEntityRecord(
-				'postType',
-				postType,
-				postId
-			);
-			const _isLoaded = !! postId;
-
-			return {
-				showIconLabels: select( preferencesStore ).get(
-					'core/edit-site',
-					'showIconLabels'
-				),
-				entityTitle: getTemplateInfo( record ).title,
-				isLoaded: _isLoaded,
-				template: record,
-				templateType: postType,
-			};
-		}, [] );
-
-	const entityLabel =
-		templateType === 'wp_template_part' ? 'template part' : 'template';
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
+		[]
+	);
+	const { isLoaded, record, getTitle } = useEditedEntityRecord();
 	const { label, icon } = useSecondaryText();
 
 	// Use internal state instead of a ref to make sure that the component
@@ -126,7 +102,7 @@ export default function DocumentActions() {
 	}
 
 	// Return feedback that the template does not seem to exist.
-	if ( ! entityTitle ) {
+	if ( ! record ) {
 		return (
 			<div className="edit-site-document-actions">
 				{ __( 'Template not found' ) }
@@ -134,6 +110,11 @@ export default function DocumentActions() {
 		);
 	}
 
+	const entityLabel =
+		record.type === 'wp_template_part'
+			? __( 'template part' )
+			: __( 'template' );
+
 	return (
 		<div
 			className={ classnames( 'edit-site-document-actions', {
@@ -156,7 +137,7 @@ export default function DocumentActions() {
 							entityLabel
 						) }
 					</VisuallyHidden>
-					{ decodeEntities( entityTitle ) }
+					{ getTitle() }
 				</Text>
 				<div className="edit-site-document-actions__secondary-item">
 					<BlockIcon icon={ icon } showColors />
@@ -186,7 +167,7 @@ export default function DocumentActions() {
 					contentClassName="edit-site-document-actions__info-dropdown"
 					renderContent={ ( { onClose } ) => (
 						<TemplateDetails
-							template={ template }
+							template={ record }
 							onClose={ onClose }
 						/>
 					) }

package/src/components/header-edit-mode/style.scss

@@ -10,6 +10,7 @@ $header-toolbar-min-width: 335px;
 	width: 100%;
 	justify-content: space-between;
 	border-bottom: $border-width solid $gray-200;
+	padding-left: $header-height;
 
 	.edit-site-header-edit-mode__start {
 		display: flex;