@wordpress/edit-site 5.0.0 → 5.2.0

package/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { useLocation, useHistory } from '../routes';
+
+export default function useSyncCanvasModeWithURL() {
+	const history = useHistory();
+	const { params } = useLocation();
+	const canvasMode = useSelect(
+		( select ) => select( editSiteStore ).__unstableGetCanvasMode(),
+		[]
+	);
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const currentCanvasMode = useRef( canvasMode );
+	const { canvas: canvasInUrl = 'view' } = params;
+	const currentCanvasInUrl = useRef( canvasInUrl );
+	useEffect( () => {
+		currentCanvasMode.current = canvasMode;
+		if ( currentCanvasMode !== currentCanvasInUrl ) {
+			history.push( {
+				...params,
+				canvas: canvasMode,
+			} );
+		}
+	}, [ canvasMode ] );
+
+	useEffect( () => {
+		currentCanvasInUrl.current = canvasInUrl;
+		if ( canvasInUrl !== currentCanvasMode.current ) {
+			__unstableSetCanvasMode( canvasInUrl );
+		}
+	}, [ canvasInUrl ] );
+}

package/src/components/template-details/edit-template-title.js

@@ -17,6 +17,7 @@ export default function EditTemplateTitle( { template } ) {
 
 	return (
 		<TextControl
+			__nextHasNoMarginBottom
 			label={ __( 'Title' ) }
 			value={ forceEmpty ? '' : title }
 			help={

package/src/components/template-details/template-part-area-selector.js

@@ -28,6 +28,7 @@ export default function TemplatePartAreaSelector( { id } ) {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Area' ) }
 			labelPosition="top"
 			options={ areaOptions }

package/src/components/use-edited-entity-record/index.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function useEditedEntityRecord() {
+	const { record, title, 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 {
+			record: _record,
+			title: getTemplateInfo( _record ).title,
+			isLoaded: _isLoaded,
+		};
+	}, [] );
+
+	return {
+		isLoaded,
+		record,
+		getTitle: () => ( title ? decodeEntities( title ) : null ),
+	};
+}

package/src/hooks/index.js

@@ -2,4 +2,5 @@
  * Internal dependencies
  */
 import './components';
+import './push-changes-to-global-styles';
 import './template-part-edit';

package/src/hooks/push-changes-to-global-styles/index.js

@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import { get, set } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import {
+	InspectorAdvancedControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { BaseControl, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
+	getBlockType,
+} from '@wordpress/blocks';
+import { useContext, useMemo, useCallback } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { getSupportedGlobalStylesPanels } from '../../components/global-styles/hooks';
+import { GlobalStylesContext } from '../../components/global-styles/context';
+import {
+	STYLE_PATH_TO_CSS_VAR_INFIX,
+	STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
+} from '../../components/global-styles/utils';
+
+function getChangesToPush( name, attributes ) {
+	return getSupportedGlobalStylesPanels( name ).flatMap( ( key ) => {
+		if ( ! STYLE_PROPERTY[ key ] ) {
+			return [];
+		}
+		const { value: path } = STYLE_PROPERTY[ key ];
+		const presetAttributeKey = path.join( '.' );
+		const presetAttributeValue =
+			attributes[
+				STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE[ presetAttributeKey ]
+			];
+		const value = presetAttributeValue
+			? `var:preset|${ STYLE_PATH_TO_CSS_VAR_INFIX[ presetAttributeKey ] }|${ presetAttributeValue }`
+			: get( attributes.style, path );
+		return value ? [ { path, value } ] : [];
+	} );
+}
+
+function cloneDeep( object ) {
+	return ! object ? {} : JSON.parse( JSON.stringify( object ) );
+}
+
+function PushChangesToGlobalStylesControl( {
+	name,
+	attributes,
+	setAttributes,
+} ) {
+	const changes = useMemo(
+		() => getChangesToPush( name, attributes ),
+		[ name, attributes ]
+	);
+
+	const { user: userConfig, setUserConfig } =
+		useContext( GlobalStylesContext );
+
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const pushChanges = useCallback( () => {
+		if ( changes.length === 0 ) {
+			return;
+		}
+
+		const { style: blockStyles } = attributes;
+
+		const newBlockStyles = cloneDeep( blockStyles );
+		const newUserConfig = cloneDeep( userConfig );
+
+		for ( const { path, value } of changes ) {
+			set( newBlockStyles, path, undefined );
+			set( newUserConfig, [ 'styles', 'blocks', name, ...path ], value );
+		}
+
+		// @wordpress/core-data doesn't support editing multiple entity types in
+		// a single undo level. So for now, we disable @wordpress/core-data undo
+		// tracking and implement our own Undo button in the snackbar
+		// notification.
+		__unstableMarkNextChangeAsNotPersistent();
+		setAttributes( { style: newBlockStyles } );
+		setUserConfig( () => newUserConfig, { undoIgnore: true } );
+
+		createSuccessNotice(
+			sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__( '%s styles applied.' ),
+				getBlockType( name ).title
+			),
+			{
+				type: 'snackbar',
+				actions: [
+					{
+						label: __( 'Undo' ),
+						onClick() {
+							__unstableMarkNextChangeAsNotPersistent();
+							setAttributes( { style: blockStyles } );
+							setUserConfig( () => userConfig, {
+								undoIgnore: true,
+							} );
+						},
+					},
+				],
+			}
+		);
+	}, [ changes, attributes, userConfig, name ] );
+
+	return (
+		<BaseControl
+			className="edit-site-push-changes-to-global-styles-control"
+			help={ sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__(
+					'Apply this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
+				),
+				getBlockType( name ).title
+			) }
+		>
+			<BaseControl.VisualLabel>
+				{ __( 'Styles' ) }
+			</BaseControl.VisualLabel>
+			<Button
+				variant="primary"
+				disabled={ changes.length === 0 }
+				onClick={ pushChanges }
+			>
+				{ __( 'Apply globally' ) }
+			</Button>
+		</BaseControl>
+	);
+}
+
+const withPushChangesToGlobalStyles = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) =>
+		(
+			<>
+				<BlockEdit { ...props } />
+				<InspectorAdvancedControls>
+					<PushChangesToGlobalStylesControl { ...props } />
+				</InspectorAdvancedControls>
+			</>
+		)
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/edit-site/push-changes-to-global-styles',
+	withPushChangesToGlobalStyles
+);

package/src/hooks/push-changes-to-global-styles/style.scss

@@ -0,0 +1,4 @@
+.edit-site-push-changes-to-global-styles-control .components-button {
+	justify-content: center;
+	width: 100%;
+}

package/src/index.js

@@ -16,6 +16,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { addFilter } from '@wordpress/hooks';
+import { registerLegacyWidgetBlock } from '@wordpress/widgets';
 
 /**
  * Internal dependencies
@@ -109,6 +110,7 @@ export function initializeEditor( id, settings ) {
 
 	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
 	registerCoreBlocks();
+	registerLegacyWidgetBlock( { inserter: false } );
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: true,

package/src/store/reducer.js

@@ -131,7 +131,7 @@ export function saveViewPanel( state = false, action ) {
  * @param {Object} state  Current state.
  * @param {Object} action Dispatched action.
  */
-function canvasMode( state = 'view', action ) {
+function canvasMode( state = 'init', action ) {
 	switch ( action.type ) {
 		case 'SET_CANVAS_MODE':
 			return action.mode;

package/src/style.scss

@@ -22,8 +22,10 @@
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-templates/style.scss";
+@import "./components/site-hub/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
+@import "./hooks/push-changes-to-global-styles/style.scss";
 
 html #wpadminbar {
 	display: none;

package/build/components/site-title/index.js

@@ -1,55 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _data = require("@wordpress/data");
-
-var _coreData = require("@wordpress/core-data");
-
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-function SiteTitle(_ref) {
-  let {
-    className
-  } = _ref;
-  const {
-    isRequestingSite,
-    siteTitle
-  } = (0, _data.useSelect)(select => {
-    const {
-      getEntityRecord,
-      isResolving
-    } = select(_coreData.store);
-    const siteData = getEntityRecord('root', '__unstableBase', undefined) || {};
-    return {
-      isRequestingSite: isResolving('core', 'getEntityRecord', ['root', '__unstableBase', undefined]),
-      siteTitle: siteData.name
-    };
-  }, []);
-
-  if (isRequestingSite && !siteTitle) {
-    return null;
-  }
-
-  return (0, _element.createElement)("div", {
-    className: (0, _classnames.default)(className, 'edit-site-site-title')
-  }, siteTitle);
-}
-
-var _default = SiteTitle;
-exports.default = _default;
-//# sourceMappingURL=index.js.map

package/build/components/site-title/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/site-title/index.js"],"names":["SiteTitle","className","isRequestingSite","siteTitle","select","getEntityRecord","isResolving","coreDataStore","siteData","undefined","name"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,SAAT,OAAoC;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AACnC,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAkC,qBAAaC,MAAF,IAAc;AAChE,UAAM;AAAEC,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAmCF,MAAM,CAAEG,eAAF,CAA/C;AACA,UAAMC,QAAQ,GACbH,eAAe,CAAE,MAAF,EAAU,gBAAV,EAA4BI,SAA5B,CAAf,IAA0D,EAD3D;AAGA,WAAO;AACNP,MAAAA,gBAAgB,EAAEI,WAAW,CAAE,MAAF,EAAU,iBAAV,EAA6B,CACzD,MADyD,EAEzD,gBAFyD,EAGzDG,SAHyD,CAA7B,CADvB;AAMNN,MAAAA,SAAS,EAAEK,QAAQ,CAACE;AANd,KAAP;AAQA,GAbuC,EAarC,EAbqC,CAAxC;;AAeA,MAAKR,gBAAgB,IAAI,CAAEC,SAA3B,EAAuC;AACtC,WAAO,IAAP;AACA;;AAED,SACC;AAAK,IAAA,SAAS,EAAG,yBAAYF,SAAZ,EAAuB,sBAAvB;AAAjB,KACGE,SADH,CADD;AAKA;;eAEcH,S","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\nfunction SiteTitle( { className } ) {\n\tconst { isRequestingSite, siteTitle } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, isResolving } = select( coreDataStore );\n\t\tconst siteData =\n\t\t\tgetEntityRecord( 'root', '__unstableBase', undefined ) || {};\n\n\t\treturn {\n\t\t\tisRequestingSite: isResolving( 'core', 'getEntityRecord', [\n\t\t\t\t'root',\n\t\t\t\t'__unstableBase',\n\t\t\t\tundefined,\n\t\t\t] ),\n\t\t\tsiteTitle: siteData.name,\n\t\t};\n\t}, [] );\n\n\tif ( isRequestingSite && ! siteTitle ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className={ classnames( className, 'edit-site-site-title' ) }>\n\t\t\t{ siteTitle }\n\t\t</div>\n\t);\n}\n\nexport default SiteTitle;\n"]}

package/build-module/components/site-title/index.js

@@ -1,43 +0,0 @@
-import { createElement } from "@wordpress/element";
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-/**
- * WordPress dependencies
- */
-
-import { useSelect } from '@wordpress/data';
-import { store as coreDataStore } from '@wordpress/core-data';
-
-function SiteTitle(_ref) {
-  let {
-    className
-  } = _ref;
-  const {
-    isRequestingSite,
-    siteTitle
-  } = useSelect(select => {
-    const {
-      getEntityRecord,
-      isResolving
-    } = select(coreDataStore);
-    const siteData = getEntityRecord('root', '__unstableBase', undefined) || {};
-    return {
-      isRequestingSite: isResolving('core', 'getEntityRecord', ['root', '__unstableBase', undefined]),
-      siteTitle: siteData.name
-    };
-  }, []);
-
-  if (isRequestingSite && !siteTitle) {
-    return null;
-  }
-
-  return createElement("div", {
-    className: classnames(className, 'edit-site-site-title')
-  }, siteTitle);
-}
-
-export default SiteTitle;
-//# sourceMappingURL=index.js.map

package/build-module/components/site-title/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/site-title/index.js"],"names":["classnames","useSelect","store","coreDataStore","SiteTitle","className","isRequestingSite","siteTitle","select","getEntityRecord","isResolving","siteData","undefined","name"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,sBAAvC;;AAEA,SAASC,SAAT,OAAoC;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AACnC,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAkCN,SAAS,CAAIO,MAAF,IAAc;AAChE,UAAM;AAAEC,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAmCF,MAAM,CAAEL,aAAF,CAA/C;AACA,UAAMQ,QAAQ,GACbF,eAAe,CAAE,MAAF,EAAU,gBAAV,EAA4BG,SAA5B,CAAf,IAA0D,EAD3D;AAGA,WAAO;AACNN,MAAAA,gBAAgB,EAAEI,WAAW,CAAE,MAAF,EAAU,iBAAV,EAA6B,CACzD,MADyD,EAEzD,gBAFyD,EAGzDE,SAHyD,CAA7B,CADvB;AAMNL,MAAAA,SAAS,EAAEI,QAAQ,CAACE;AANd,KAAP;AAQA,GAbgD,EAa9C,EAb8C,CAAjD;;AAeA,MAAKP,gBAAgB,IAAI,CAAEC,SAA3B,EAAuC;AACtC,WAAO,IAAP;AACA;;AAED,SACC;AAAK,IAAA,SAAS,EAAGP,UAAU,CAAEK,SAAF,EAAa,sBAAb;AAA3B,KACGE,SADH,CADD;AAKA;;AAED,eAAeH,SAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\nfunction SiteTitle( { className } ) {\n\tconst { isRequestingSite, siteTitle } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, isResolving } = select( coreDataStore );\n\t\tconst siteData =\n\t\t\tgetEntityRecord( 'root', '__unstableBase', undefined ) || {};\n\n\t\treturn {\n\t\t\tisRequestingSite: isResolving( 'core', 'getEntityRecord', [\n\t\t\t\t'root',\n\t\t\t\t'__unstableBase',\n\t\t\t\tundefined,\n\t\t\t] ),\n\t\t\tsiteTitle: siteData.name,\n\t\t};\n\t}, [] );\n\n\tif ( isRequestingSite && ! siteTitle ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className={ classnames( className, 'edit-site-site-title' ) }>\n\t\t\t{ siteTitle }\n\t\t</div>\n\t);\n}\n\nexport default SiteTitle;\n"]}

package/src/components/site-title/index.js

@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreDataStore } from '@wordpress/core-data';
-
-function SiteTitle( { className } ) {
-	const { isRequestingSite, siteTitle } = useSelect( ( select ) => {
-		const { getEntityRecord, isResolving } = select( coreDataStore );
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-
-		return {
-			isRequestingSite: isResolving( 'core', 'getEntityRecord', [
-				'root',
-				'__unstableBase',
-				undefined,
-			] ),
-			siteTitle: siteData.name,
-		};
-	}, [] );
-
-	if ( isRequestingSite && ! siteTitle ) {
-		return null;
-	}
-
-	return (
-		<div className={ classnames( className, 'edit-site-site-title' ) }>
-			{ siteTitle }
-		</div>
-	);
-}
-
-export default SiteTitle;