@wordpress/edit-site 5.28.5 → 5.30.0

package/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

@@ -0,0 +1,159 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useContext, useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from '../../components/global-styles/global-styles-provider';
+import cloneDeep from '../../utils/clone-deep';
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
+/**
+ * Removes all instances of a property from an object.
+ *
+ * @param {Object} object   The object to remove the property from.
+ * @param {string} property The property to remove.
+ * @return {Object} The modified object.
+ */
+export function removePropertyFromObject( object, property ) {
+	if ( ! property || typeof property !== 'string' ) {
+		return object;
+	}
+
+	if ( typeof object !== 'object' || ! Object.keys( object ).length ) {
+		return object;
+	}
+
+	for ( const key in object ) {
+		if ( key === property ) {
+			delete object[ key ];
+		} else if ( typeof object[ key ] === 'object' ) {
+			removePropertyFromObject( object[ key ], property );
+		}
+	}
+	return object;
+}
+
+/**
+ * A convenience wrapper for `useThemeStyleVariationsByProperty()` that fetches the current theme style variations,
+ * and user-defined global style/settings object.
+ *
+ * @param {Object}   props          Object of hook args.
+ * @param {string}   props.property The property to filter by.
+ * @param {Function} props.filter   Optional. The filter function to apply to the variations.
+ * @return {Object[]|*} The merged object.
+ */
+export function useCurrentMergeThemeStyleVariationsWithUserConfig( {
+	property,
+	filter,
+} ) {
+	const variations = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeGlobalStylesVariations();
+	}, [] );
+	const { user: baseVariation } = useContext( GlobalStylesContext );
+
+	return useThemeStyleVariationsByProperty( {
+		variations,
+		property,
+		filter,
+		baseVariation: removePropertyFromObject(
+			cloneDeep( baseVariation ),
+			property
+		),
+	} );
+}
+
+/**
+ * Returns a new object, with properties specified in `property`,
+ * maintain the original object tree structure.
+ * The function is recursive, so it will perform a deep search for the given property.
+ * E.g., the function will return `{ a: { b: { c: { test: 1 } } } }` if the property is `test`.
+ *
+ * @param {Object} object   The object to filter
+ * @param {Object} property The property to filter by
+ * @return {Object} The merged object.
+ */
+export const filterObjectByProperty = ( object, property ) => {
+	if ( ! object ) {
+		return {};
+	}
+
+	const newObject = {};
+	Object.keys( object ).forEach( ( key ) => {
+		if ( key === property ) {
+			newObject[ key ] = object[ key ];
+		} else if ( typeof object[ key ] === 'object' ) {
+			const newFilter = filterObjectByProperty( object[ key ], property );
+			if ( Object.keys( newFilter ).length ) {
+				newObject[ key ] = newFilter;
+			}
+		}
+	} );
+	return newObject;
+};
+
+/**
+ * Returns a new object with only the properties specified in `property`.
+ * Optional merges the baseVariation object with the variation object.
+ * Note: this function will only overwrite the specified property in baseVariation if it exists.
+ * The baseVariation will not be otherwise modified. To strip a property from the baseVariation object, use `removePropertyFromObject`.
+ * See useCurrentMergeThemeStyleVariationsWithUserConfig for an example of how to use this function.
+ *
+ * @param {Object}   props               Object of hook args.
+ * @param {Object[]} props.variations    The theme style variations to filter.
+ * @param {string}   props.property      The property to filter by.
+ * @param {Function} props.filter        Optional. The filter function to apply to the variations.
+ * @param {Object}   props.baseVariation Optional. Base or user settings to be updated with variation properties.
+ * @return {Object[]|*} The merged object.
+ */
+export default function useThemeStyleVariationsByProperty( {
+	variations,
+	property,
+	filter,
+	baseVariation,
+} ) {
+	return useMemo( () => {
+		if ( ! property || ! variations || variations?.length === 0 ) {
+			return variations;
+		}
+
+		const clonedBaseVariation =
+			typeof baseVariation === 'object' &&
+			Object.keys( baseVariation ).length > 0
+				? cloneDeep( baseVariation )
+				: null;
+
+		let processedStyleVariations = variations.map( ( variation ) => {
+			let result = {
+				...filterObjectByProperty( cloneDeep( variation ), property ),
+				title: variation?.title,
+				description: variation?.description,
+			};
+
+			if ( clonedBaseVariation ) {
+				/*
+				 * Overwrites all baseVariation object `styleProperty` properties
+				 * with the theme variation `styleProperty` properties.
+				 */
+				result = mergeBaseAndUserConfigs( clonedBaseVariation, result );
+			}
+			return result;
+		} );
+
+		if ( 'function' === typeof filter ) {
+			processedStyleVariations =
+				processedStyleVariations.filter( filter );
+		}
+
+		return processedStyleVariations;
+	}, [ variations, property, baseVariation, filter ] );
+}

package/src/store/actions.js

@@ -11,7 +11,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
-import { speak } from '@wordpress/a11y';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -477,13 +476,7 @@ export const revertTemplate =
  */
 export const openGeneralSidebar =
 	( name ) =>
-	( { dispatch, registry } ) => {
-		const isDistractionFree = registry
-			.select( preferencesStore )
-			.get( 'core', 'distractionFree' );
-		if ( isDistractionFree ) {
-			dispatch.toggleDistractionFree();
-		}
+	( { registry } ) => {
 		registry
 			.dispatch( interfaceStore )
 			.enableComplementaryArea( editSiteStoreName, name );
@@ -500,29 +493,21 @@ export const closeGeneralSidebar =
 			.disableComplementaryArea( editSiteStoreName );
 	};
 
+/**
+ * Triggers an action used to switch editor mode.
+ *
+ * @deprecated
+ *
+ * @param {string} mode The editor mode.
+ */
 export const switchEditorMode =
 	( mode ) =>
-	( { dispatch, registry } ) => {
-		registry
-			.dispatch( 'core/preferences' )
-			.set( 'core', 'editorMode', mode );
-
-		// Unselect blocks when we switch to a non visual mode.
-		if ( mode !== 'visual' ) {
-			registry.dispatch( blockEditorStore ).clearSelectedBlock();
-		}
-
-		if ( mode === 'visual' ) {
-			speak( __( 'Visual editor selected' ), 'assertive' );
-		} else if ( mode === 'text' ) {
-			const isDistractionFree = registry
-				.select( preferencesStore )
-				.get( 'core', 'distractionFree' );
-			if ( isDistractionFree ) {
-				dispatch.toggleDistractionFree();
-			}
-			speak( __( 'Code editor selected' ), 'assertive' );
-		}
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-site' ).switchEditorMode", {
+			since: '6.6',
+			alternative: "dispatch( 'core/editor').switchEditorMode",
+		} );
+		registry.dispatch( editorStore ).switchEditorMode( mode );
 	};
 
 /**
@@ -552,64 +537,15 @@ export const setHasPageContentFocus =
  * Action that toggles Distraction free mode.
  * Distraction free mode expects there are no sidebars, as due to the
  * z-index values set, you can't close sidebars.
+ *
+ * @deprecated
  */
 export const toggleDistractionFree =
 	() =>
-	( { dispatch, registry } ) => {
-		const isDistractionFree = registry
-			.select( preferencesStore )
-			.get( 'core', 'distractionFree' );
-		if ( isDistractionFree ) {
-			registry
-				.dispatch( preferencesStore )
-				.set( 'core', 'fixedToolbar', false );
-		}
-		if ( ! isDistractionFree ) {
-			registry.batch( () => {
-				registry
-					.dispatch( preferencesStore )
-					.set( 'core', 'fixedToolbar', true );
-				registry.dispatch( editorStore ).setIsInserterOpened( false );
-				registry.dispatch( editorStore ).setIsListViewOpened( false );
-				dispatch.closeGeneralSidebar();
-			} );
-		}
-		registry.batch( () => {
-			registry
-				.dispatch( preferencesStore )
-				.set( 'core', 'distractionFree', ! isDistractionFree );
-			registry
-				.dispatch( noticesStore )
-				.createInfoNotice(
-					isDistractionFree
-						? __( 'Distraction free off.' )
-						: __( 'Distraction free on.' ),
-					{
-						id: 'core/edit-site/distraction-free-mode/notice',
-						type: 'snackbar',
-						actions: [
-							{
-								label: __( 'Undo' ),
-								onClick: () => {
-									registry.batch( () => {
-										registry
-											.dispatch( preferencesStore )
-											.set(
-												'core',
-												'fixedToolbar',
-												isDistractionFree ? true : false
-											);
-										registry
-											.dispatch( preferencesStore )
-											.toggle(
-												'core',
-												'distractionFree'
-											);
-									} );
-								},
-							},
-						],
-					}
-				);
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-site' ).toggleDistractionFree", {
+			since: '6.6',
+			alternative: "dispatch( 'core/editor').toggleDistractionFree",
 		} );
+		registry.dispatch( editorStore ).toggleDistractionFree();
 	};

package/src/store/test/actions.js

@@ -75,79 +75,4 @@ describe( 'actions', () => {
 			expect( select.getEditedPostType() ).toBe( 'wp_template_part' );
 		} );
 	} );
-
-	describe( 'openGeneralSidebar', () => {
-		it( 'should turn off distraction free mode when opening a general sidebar', () => {
-			const registry = createRegistryWithStores();
-			registry
-				.dispatch( preferencesStore )
-				.set( 'core', 'distractionFree', true );
-			registry
-				.dispatch( editSiteStore )
-				.openGeneralSidebar( 'edit-site/global-styles' );
-			expect(
-				registry
-					.select( preferencesStore )
-					.get( 'core', 'distractionFree' )
-			).toBe( false );
-		} );
-	} );
-
-	describe( 'switchEditorMode', () => {
-		it( 'should turn off distraction free mode when switching to code editor', () => {
-			const registry = createRegistryWithStores();
-			registry
-				.dispatch( preferencesStore )
-				.set( 'core', 'distractionFree', true );
-			registry.dispatch( editSiteStore ).switchEditorMode( 'visual' );
-			expect(
-				registry
-					.select( preferencesStore )
-					.get( 'core', 'distractionFree' )
-			).toBe( true );
-			registry.dispatch( editSiteStore ).switchEditorMode( 'text' );
-			expect(
-				registry
-					.select( preferencesStore )
-					.get( 'core', 'distractionFree' )
-			).toBe( false );
-		} );
-	} );
-
-	describe( 'toggleDistractionFree', () => {
-		it( 'should properly update settings to prevent layout corruption when enabling distraction free mode', () => {
-			const registry = createRegistryWithStores();
-			// Enable everything that shouldn't be enabled in distraction free mode.
-			registry
-				.dispatch( preferencesStore )
-				.set( 'core', 'fixedToolbar', true );
-			registry.dispatch( editorStore ).setIsListViewOpened( true );
-			registry
-				.dispatch( editSiteStore )
-				.openGeneralSidebar( 'edit-site/global-styles' );
-			// Initial state is falsy.
-			registry.dispatch( editSiteStore ).toggleDistractionFree();
-			expect(
-				registry
-					.select( preferencesStore )
-					.get( 'core', 'fixedToolbar' )
-			).toBe( true );
-			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
-				false
-			);
-			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
-				false
-			);
-			expect(
-				registry
-					.select( interfaceStore )
-					.getActiveComplementaryArea( editSiteStore.name )
-			).toBeNull();
-			expect(
-				registry
-					.select( preferencesStore )
-					.get( 'core', 'distractionFree' )
-			).toBe( true );
-		} );
-	} );
 } );

package/src/style.scss

@@ -8,7 +8,6 @@
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
 @import "./components/header-edit-mode/style.scss";
-@import "./components/list/style.scss";
 @import "./components/page/style.scss";
 @import "./components/page-pages/style.scss";
 @import "./components/page-patterns/style.scss";
@@ -49,6 +48,7 @@
 @import "./hooks/push-changes-to-global-styles/style.scss";
 @import "./components/global-styles/font-library-modal/style.scss";
 @import "./components/pagination/style.scss";
+@import "./components/global-styles/variations/style.scss";
 
 body.js #wpadminbar {
 	display: none;
@@ -67,13 +67,8 @@ body.js.site-editor-php {
 	background: $gray-900;
 }
 
-.edit-site,
-// The modals are shown outside the .edit-site wrapper, they need these styles.
-.components-modal__frame {
-	@include reset;
-}
-
 .edit-site {
+	@include reset;
 	height: 100vh;
 
 	// On mobile the main content area has to scroll, otherwise you can invoke
@@ -103,7 +98,7 @@ body.js.site-editor-php {
 	}
 
 	.interface-interface-skeleton__content {
-		background-color: $gray-900;
+		background-color: $gray-300;
 	}
 }
 

package/src/utils/clone-deep.js

@@ -0,0 +1,8 @@
+/**
+ * Makes a copy of an object without storing any references to the original object.
+ * @param {Object} object
+ * @return {Object} The cloned object.
+ */
+export default function cloneDeep( object ) {
+	return ! object ? {} : JSON.parse( JSON.stringify( object ) );
+}

package/build/components/global-styles/preview.js

@@ -1,271 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _blockEditor = require("@wordpress/block-editor");
-var _components = require("@wordpress/components");
-var _compose = require("@wordpress/compose");
-var _element = require("@wordpress/element");
-var _lockUnlock = require("../../lock-unlock");
-var _hooks = require("./hooks");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  useGlobalStyle,
-  useGlobalStylesOutput
-} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
-const firstFrame = {
-  start: {
-    scale: 1,
-    opacity: 1
-  },
-  hover: {
-    scale: 0,
-    opacity: 0
-  }
-};
-const midFrame = {
-  hover: {
-    opacity: 1
-  },
-  start: {
-    opacity: 0.5
-  }
-};
-const secondFrame = {
-  hover: {
-    scale: 1,
-    opacity: 1
-  },
-  start: {
-    scale: 0,
-    opacity: 0
-  }
-};
-const normalizedWidth = 248;
-const normalizedHeight = 152;
-const normalizedColorSwatchSize = 32;
-
-// Throttle options for useThrottle. Must be defined outside of the component,
-// so that the object reference is the same on each render.
-const THROTTLE_OPTIONS = {
-  leading: true,
-  trailing: true
-};
-const StylesPreview = ({
-  label,
-  isFocused,
-  withHoverView
-}) => {
-  const [fontWeight] = useGlobalStyle('typography.fontWeight');
-  const [fontFamily = 'serif'] = useGlobalStyle('typography.fontFamily');
-  const [headingFontFamily = fontFamily] = useGlobalStyle('elements.h1.typography.fontFamily');
-  const [headingFontWeight = fontWeight] = useGlobalStyle('elements.h1.typography.fontWeight');
-  const [textColor = 'black'] = useGlobalStyle('color.text');
-  const [headingColor = textColor] = useGlobalStyle('elements.h1.color.text');
-  const [backgroundColor = 'white'] = useGlobalStyle('color.background');
-  const [gradientValue] = useGlobalStyle('color.gradient');
-  const [styles] = useGlobalStylesOutput();
-  const disableMotion = (0, _compose.useReducedMotion)();
-  const [isHovered, setIsHovered] = (0, _element.useState)(false);
-  const [containerResizeListener, {
-    width
-  }] = (0, _compose.useResizeObserver)();
-  const [throttledWidth, setThrottledWidthState] = (0, _element.useState)(width);
-  const [ratioState, setRatioState] = (0, _element.useState)();
-  const setThrottledWidth = (0, _compose.useThrottle)(setThrottledWidthState, 250, THROTTLE_OPTIONS);
-
-  // Must use useLayoutEffect to avoid a flash of the iframe at the wrong
-  // size before the width is set.
-  (0, _element.useLayoutEffect)(() => {
-    if (width) {
-      setThrottledWidth(width);
-    }
-  }, [width, setThrottledWidth]);
-
-  // Must use useLayoutEffect to avoid a flash of the iframe at the wrong
-  // size before the width is set.
-  (0, _element.useLayoutEffect)(() => {
-    const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
-    const ratioDiff = newRatio - (ratioState || 0);
-
-    // Only update the ratio state if the difference is big enough
-    // or if the ratio state is not yet set. This is to avoid an
-    // endless loop of updates at particular viewport heights when the
-    // presence of a scrollbar causes the width to change slightly.
-    const isRatioDiffBigEnough = Math.abs(ratioDiff) > 0.1;
-    if (isRatioDiffBigEnough || !ratioState) {
-      setRatioState(newRatio);
-    }
-  }, [throttledWidth, ratioState]);
-
-  // Set a fallbackRatio to use before the throttled ratio has been set.
-  const fallbackRatio = width ? width / normalizedWidth : 1;
-  // Use the throttled ratio if it has been calculated, otherwise
-  // use the fallback ratio. The throttled ratio is used to avoid
-  // an endless loop of updates at particular viewport heights.
-  // See: https://github.com/WordPress/gutenberg/issues/55112
-  const ratio = ratioState ? ratioState : fallbackRatio;
-  const {
-    paletteColors,
-    highlightedColors
-  } = (0, _hooks.useStylesPreviewColors)();
-
-  // Reset leaked styles from WP common.css and remove main content layout padding and border.
-  const editorStyles = (0, _element.useMemo)(() => {
-    if (styles) {
-      return [...styles, {
-        css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',
-        isGlobalStyles: true
-      }];
-    }
-    return styles;
-  }, [styles]);
-  const isReady = !!width;
-  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)("div", {
-    style: {
-      position: 'relative'
-    }
-  }, containerResizeListener), isReady && (0, _react.createElement)(_blockEditor.__unstableIframe, {
-    className: "edit-site-global-styles-preview__iframe",
-    style: {
-      width: '100%',
-      height: normalizedHeight * ratio
-    },
-    onMouseEnter: () => setIsHovered(true),
-    onMouseLeave: () => setIsHovered(false),
-    tabIndex: -1
-  }, (0, _react.createElement)(_blockEditor.__unstableEditorStyles, {
-    styles: editorStyles
-  }), (0, _react.createElement)(_components.__unstableMotion.div, {
-    style: {
-      height: normalizedHeight * ratio,
-      width: '100%',
-      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
-      cursor: withHoverView ? 'pointer' : undefined
-    },
-    initial: "start",
-    animate: (isHovered || isFocused) && !disableMotion && label ? 'hover' : 'start'
-  }, (0, _react.createElement)(_components.__unstableMotion.div, {
-    variants: firstFrame,
-    style: {
-      height: '100%',
-      overflow: 'hidden'
-    }
-  }, (0, _react.createElement)(_components.__experimentalHStack, {
-    spacing: 10 * ratio,
-    justify: "center",
-    style: {
-      height: '100%',
-      overflow: 'hidden'
-    }
-  }, (0, _react.createElement)(_components.__unstableMotion.div, {
-    style: {
-      fontFamily: headingFontFamily,
-      fontSize: 65 * ratio,
-      color: headingColor,
-      fontWeight: headingFontWeight
-    },
-    animate: {
-      scale: 1,
-      opacity: 1
-    },
-    initial: {
-      scale: 0.1,
-      opacity: 0
-    },
-    transition: {
-      delay: 0.3,
-      type: 'tween'
-    }
-  }, "Aa"), (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 4 * ratio
-  }, highlightedColors.map(({
-    slug,
-    color
-  }, index) => (0, _react.createElement)(_components.__unstableMotion.div, {
-    key: slug,
-    style: {
-      height: normalizedColorSwatchSize * ratio,
-      width: normalizedColorSwatchSize * ratio,
-      background: color,
-      borderRadius: normalizedColorSwatchSize * ratio / 2
-    },
-    animate: {
-      scale: 1,
-      opacity: 1
-    },
-    initial: {
-      scale: 0.1,
-      opacity: 0
-    },
-    transition: {
-      delay: index === 1 ? 0.2 : 0.1
-    }
-  }))))), (0, _react.createElement)(_components.__unstableMotion.div, {
-    variants: withHoverView && midFrame,
-    style: {
-      height: '100%',
-      width: '100%',
-      position: 'absolute',
-      top: 0,
-      overflow: 'hidden',
-      filter: 'blur(60px)',
-      opacity: 0.1
-    }
-  }, (0, _react.createElement)(_components.__experimentalHStack, {
-    spacing: 0,
-    justify: "flex-start",
-    style: {
-      height: '100%',
-      overflow: 'hidden'
-    }
-  }, paletteColors.slice(0, 4).map(({
-    color
-  }, index) => (0, _react.createElement)("div", {
-    key: index,
-    style: {
-      height: '100%',
-      background: color,
-      flexGrow: 1
-    }
-  })))), (0, _react.createElement)(_components.__unstableMotion.div, {
-    variants: secondFrame,
-    style: {
-      height: '100%',
-      width: '100%',
-      overflow: 'hidden',
-      position: 'absolute',
-      top: 0
-    }
-  }, (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 3 * ratio,
-    justify: "center",
-    style: {
-      height: '100%',
-      overflow: 'hidden',
-      padding: 10 * ratio,
-      boxSizing: 'border-box'
-    }
-  }, label && (0, _react.createElement)("div", {
-    style: {
-      fontSize: 40 * ratio,
-      fontFamily: headingFontFamily,
-      color: headingColor,
-      fontWeight: headingFontWeight,
-      lineHeight: '1em',
-      textAlign: 'center'
-    }
-  }, label))))));
-};
-var _default = exports.default = StylesPreview;
-//# sourceMappingURL=preview.js.map