@wordpress/edit-site 6.33.1 → 6.33.3-next.36001005c.0

package/src/components/revisions/index.js

@@ -20,11 +20,11 @@ import { useContext, useMemo } from '@wordpress/element';
 
 import { unlock } from '../../lock-unlock';
 import EditorCanvasContainer from '../editor-canvas-container';
+import { useGlobalStylesOutputWithConfig } from '../../hooks/use-global-styles-output';
 
 const {
 	ExperimentalBlockEditorProvider,
 	GlobalStylesContext,
-	useGlobalStylesOutputWithConfig,
 	__unstableBlockStyleVariationOverridesWithConfig,
 } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );

package/src/components/sidebar-navigation-screen/style.scss

@@ -76,7 +76,7 @@
 	color: $gray-300;
 	font-size: 11px;
 	text-transform: uppercase;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 }
 
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item {

package/src/components/sidebar-navigation-screen-patterns/style.scss

@@ -22,7 +22,7 @@
 
 	h2 {
 		font-size: 11px;
-		font-weight: 500;
+		font-weight: $font-weight-medium;
 		text-transform: uppercase;
 	}
 }

package/src/components/site-hub/style.scss

@@ -29,7 +29,7 @@
 	display: block;
 	flex-grow: 1;
 	font-size: 15px;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	overflow: hidden;
 	// Add space for the ↗ to render.
 	padding-right: $grid-unit-20;

package/src/components/style-book/index.js

@@ -56,13 +56,10 @@ import {
 	STYLE_BOOK_COLOR_GROUPS,
 	STYLE_BOOK_PREVIEW_CATEGORIES,
 } from '../style-book/constants';
+import { useGlobalStylesOutputWithConfig } from '../../hooks/use-global-styles-output';
 
-const {
-	ExperimentalBlockEditorProvider,
-	useGlobalStyle,
-	GlobalStylesContext,
-	useGlobalStylesOutputWithConfig,
-} = unlock( blockEditorPrivateApis );
+const { ExperimentalBlockEditorProvider, useGlobalStyle, GlobalStylesContext } =
+	unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 const { Tabs } = unlock( componentsPrivateApis );
@@ -227,19 +224,29 @@ function applyBlockVariationsToExamples( examples, variation ) {
 	if ( ! variation ) {
 		return examples;
 	}
-
-	return examples.map( ( example ) => ( {
-		...example,
-		variation,
-		blocks: {
-			...example.blocks,
-			attributes: {
-				...example.blocks.attributes,
-				style: undefined,
-				className: getVariationClassName( variation ),
-			},
-		},
-	} ) );
+	return examples.map( ( example ) => {
+		return {
+			...example,
+			variation,
+			blocks: Array.isArray( example.blocks )
+				? example.blocks.map( ( block ) => ( {
+						...block,
+						attributes: {
+							...block.attributes,
+							style: undefined,
+							className: getVariationClassName( variation ),
+						},
+				  } ) )
+				: {
+						...example.blocks,
+						attributes: {
+							...example.blocks.attributes,
+							style: undefined,
+							className: getVariationClassName( variation ),
+						},
+				  },
+		};
+	} );
 }
 
 function StyleBook( {

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

@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
+import { generateGlobalStyles } from '@wordpress/global-styles-engine';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+const { GlobalStylesContext, useGlobalSetting } = unlock(
+	blockEditorPrivateApis
+);
+
+/**
+ * Returns the global styles output based on the provided global styles config.
+ *
+ * @param {Object}  mergedConfig       The merged global styles config.
+ * @param {boolean} disableRootPadding Disable root padding styles.
+ *
+ * @return {Array} Array of stylesheets and settings.
+ */
+export function useGlobalStylesOutputWithConfig(
+	mergedConfig = {},
+	disableRootPadding = false
+) {
+	const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGap !== null;
+	const hasFallbackGapSupport = ! hasBlockGapSupport;
+
+	const { disableLayoutStyles, getBlockStyles } = useSelect( ( select ) => {
+		const { getSettings } = select( editSiteStore );
+		const { getBlockStyles: getBlockStylesSelector } =
+			select( blocksStore );
+		return {
+			disableLayoutStyles: !! getSettings()?.disableLayoutStyles,
+			getBlockStyles: getBlockStylesSelector,
+		};
+	}, [] );
+
+	return useMemo( () => {
+		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
+			return [ [], {} ];
+		}
+
+		const blockTypes = getBlockTypes();
+
+		return generateGlobalStyles( mergedConfig, blockTypes, {
+			hasBlockGapSupport,
+			hasFallbackGapSupport,
+			disableLayoutStyles,
+			disableRootPadding,
+			getBlockStyles,
+		} );
+	}, [
+		hasBlockGapSupport,
+		hasFallbackGapSupport,
+		mergedConfig,
+		disableLayoutStyles,
+		disableRootPadding,
+		getBlockStyles,
+	] );
+}
+
+/**
+ * Returns the global styles output based on the current state of global styles config loaded in the editor context.
+ *
+ * @param {boolean} disableRootPadding Disable root padding styles.
+ *
+ * @return {Array} Array of stylesheets and settings.
+ */
+export function useGlobalStylesOutput( disableRootPadding = false ) {
+	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	return useGlobalStylesOutputWithConfig( mergedConfig, disableRootPadding );
+}

package/tsconfig.json

@@ -21,6 +21,7 @@
 		{ "path": "../element" },
 		{ "path": "../escape-html" },
 		{ "path": "../fields" },
+		{ "path": "../global-styles-engine" },
 		{ "path": "../hooks" },
 		{ "path": "../html-entities" },
 		{ "path": "../i18n" },