@wordpress/edit-site 3.0.1-next.253d9b6e21.0 → 3.0.3

package/src/components/global-styles/screen-typography.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesContext } from '../editor/global-styles-provider';
+import TypographyPanel from './typography-panel';
+import ScreenHeader from './header';
+
+function ScreenTypography( { name } ) {
+	const { root, blocks, getStyle, setStyle } = useGlobalStylesContext();
+	const context = name === undefined ? root : blocks[ name ];
+	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+
+	return (
+		<>
+			<ScreenHeader
+				back={ parentMenu ? parentMenu : '/' }
+				title={ __( 'Typography' ) }
+			/>
+			<TypographyPanel
+				context={ context }
+				getStyle={ getStyle }
+				setStyle={ setStyle }
+			/>
+		</>
+	);
+}
+
+export default ScreenTypography;

package/src/components/global-styles/style.scss

@@ -0,0 +1,35 @@
+.edit-site-global-styles-preview {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 152px;
+	margin: $grid-unit-20;
+	line-height: 1;
+
+	.component-color-indicator {
+		border-radius: 50%;
+		border: 0;
+		height: 36px;
+		width: 36px;
+		margin-left: 0;
+		padding: 0;
+	}
+}
+
+.edit-site-global-style-palette {
+	margin: $grid-unit-20;
+
+	.component-color-indicator {
+		display: block;
+		border-radius: 50%;
+		border: 0;
+		height: 24px;
+		width: 24px;
+		margin-left: 0;
+		padding: 0;
+	}
+}
+
+.edit-site-global-styles-header__description {
+	padding: 0 $grid-unit-20;
+}

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

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHeading as Heading } from '@wordpress/components';
+
+function Subtitle( { children } ) {
+	return <Heading level={ 2 }>{ children }</Heading>;
+}
+
+export default Subtitle;

package/src/components/{sidebar → global-styles}/typography-panel.js

@@ -8,7 +8,6 @@ import {
 	__experimentalLetterSpacingControl as LetterSpacingControl,
 } from '@wordpress/block-editor';
 import { PanelBody, FontSizePicker } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -76,7 +75,7 @@ export default function TypographyPanel( {
 	} );
 
 	return (
-		<PanelBody title={ __( 'Typography' ) } initialOpen={ true }>
+		<PanelBody className="edit-site-typography-panel" initialOpen={ true }>
 			{ supports.includes( 'fontFamily' ) && (
 				<FontFamilyControl
 					fontFamilies={ fontFamilies }

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

@@ -29,7 +29,7 @@ function getBlockDisplayText( block ) {
 }
 
 function useSecondaryText() {
-	const { getBlock } = useSelect( 'core/block-editor' );
+	const { getBlock } = useSelect( blockEditorStore );
 	const activeEntityBlockId = useSelect(
 		( select ) =>
 			select(

package/src/components/header/plugin-more-menu-item/index.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { ActionItem } from '@wordpress/interface';
+import { compose } from '@wordpress/compose';
+import { withPluginContext } from '@wordpress/plugins';
+
+/**
+ * Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided.
+ * The text within the component appears as the menu item label.
+ *
+ * @param {Object}                props                                 Component properties.
+ * @param {string}                [props.href]                          When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor.
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
+ * @param {Function}              [props.onClick=noop]                  The callback function to be executed when the user clicks the menu item.
+ * @param {...*}                  [props.other]                         Any additional props are passed through to the underlying [Button](/packages/components/src/button/README.md) component.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var PluginMoreMenuItem = wp.editSite.PluginMoreMenuItem;
+ * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+ *
+ * function onButtonClick() {
+ * 	alert( 'Button clicked.' );
+ * }
+ *
+ * function MyButtonMoreMenuItem() {
+ * 	return wp.element.createElement(
+ * 		PluginMoreMenuItem,
+ * 		{
+ * 			icon: moreIcon,
+ * 			onClick: onButtonClick,
+ * 		},
+ * 		__( 'My button title' )
+ * 	);
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginMoreMenuItem } from '@wordpress/edit-site';
+ * import { more } from '@wordpress/icons';
+ *
+ * function onButtonClick() {
+ * 	alert( 'Button clicked.' );
+ * }
+ *
+ * const MyButtonMoreMenuItem = () => (
+ * 	<PluginMoreMenuItem
+ * 		icon={ more }
+ * 		onClick={ onButtonClick }
+ * 	>
+ * 		{ __( 'My button title' ) }
+ * 	</PluginMoreMenuItem>
+ * );
+ * ```
+ *
+ * @return {WPComponent} The component to be rendered.
+ */
+export default compose(
+	withPluginContext( ( context, ownProps ) => {
+		return {
+			icon: ownProps.icon || context.icon,
+			name: 'core/edit-site/plugin-more-menu',
+		};
+	} )
+)( ActionItem );

package/src/components/header/plugin-sidebar-more-menu-item/index.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
+
+/**
+ * Renders a menu item in `Plugins` group in `More Menu` drop down,
+ * and can be used to activate the corresponding `PluginSidebar` component.
+ * The text within the component appears as the menu item label.
+ *
+ * @param {Object}                props                                 Component props.
+ * @param {string}                props.target                          A string identifying the target sidebar you wish to be activated by this menu item. Must be the same as the `name` prop you have given to that sidebar.
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var PluginSidebarMoreMenuItem = wp.editSite.PluginSidebarMoreMenuItem;
+ * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+ *
+ * function MySidebarMoreMenuItem() {
+ * 	return wp.element.createElement(
+ * 		PluginSidebarMoreMenuItem,
+ * 		{
+ * 			target: 'my-sidebar',
+ * 			icon: moreIcon,
+ * 		},
+ * 		__( 'My sidebar title' )
+ * 	)
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginSidebarMoreMenuItem } from '@wordpress/edit-site';
+ * import { more } from '@wordpress/icons';
+ *
+ * const MySidebarMoreMenuItem = () => (
+ * 	<PluginSidebarMoreMenuItem
+ * 		target="my-sidebar"
+ * 		icon={ more }
+ * 	>
+ * 		{ __( 'My sidebar title' ) }
+ * 	</PluginSidebarMoreMenuItem>
+ * );
+ * ```
+ *
+ * @return {WPComponent} The component to be rendered.
+ */
+
+export default function PluginSidebarMoreMenuItem( props ) {
+	return (
+		<ComplementaryAreaMoreMenuItem
+			// Menu item is marked with unstable prop for backward compatibility.
+			// @see https://github.com/WordPress/gutenberg/issues/14457
+			__unstableExplicitMenuItem
+			scope="core/edit-site"
+			{ ...props }
+		/>
+	);
+}

package/src/components/header/undo-redo/redo.js

@@ -9,7 +9,10 @@ import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 
 export default function RedoButton() {
-	const hasRedo = useSelect( ( select ) => select( coreStore ).hasRedo() );
+	const hasRedo = useSelect(
+		( select ) => select( coreStore ).hasRedo(),
+		[]
+	);
 	const { redo } = useDispatch( coreStore );
 	return (
 		<Button

package/src/components/header/undo-redo/undo.js

@@ -9,7 +9,10 @@ import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 
 export default function UndoButton() {
-	const hasUndo = useSelect( ( select ) => select( coreStore ).hasUndo() );
+	const hasUndo = useSelect(
+		( select ) => select( coreStore ).hasUndo(),
+		[]
+	);
 	const { undo } = useDispatch( coreStore );
 	return (
 		<Button

package/src/components/keyboard-shortcuts/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useEffect } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import {
 	useShortcut,
 	store as keyboardShortcutsStore,
@@ -19,8 +19,9 @@ import { SIDEBAR_BLOCK } from '../sidebar/constants';
 import { STORE_NAME } from '../../store/constants';
 
 function KeyboardShortcuts() {
-	const isListViewOpen = useSelect( ( select ) =>
-		select( editSiteStore ).isListViewOpened()
+	const isListViewOpen = useSelect(
+		( select ) => select( editSiteStore ).isListViewOpened(),
+		[]
 	);
 	const isBlockInspectorOpen = useSelect(
 		( select ) =>
@@ -35,47 +36,31 @@ function KeyboardShortcuts() {
 		interfaceStore
 	);
 
-	useShortcut(
-		'core/edit-site/undo',
-		( event ) => {
-			undo();
-			event.preventDefault();
-		},
-		{ bindGlobal: true }
-	);
+	useShortcut( 'core/edit-site/undo', ( event ) => {
+		undo();
+		event.preventDefault();
+	} );
 
-	useShortcut(
-		'core/edit-site/redo',
-		( event ) => {
-			redo();
-			event.preventDefault();
-		},
-		{ bindGlobal: true }
-	);
+	useShortcut( 'core/edit-site/redo', ( event ) => {
+		redo();
+		event.preventDefault();
+	} );
 
-	useShortcut(
-		'core/edit-site/toggle-list-view',
-		useCallback( () => {
-			setIsListViewOpened( ! isListViewOpen );
-		}, [ isListViewOpen, setIsListViewOpened ] ),
-		{ bindGlobal: true }
-	);
+	useShortcut( 'core/edit-site/toggle-list-view', () => {
+		setIsListViewOpened( ! isListViewOpen );
+	} );
 
-	useShortcut(
-		'core/edit-site/toggle-block-settings-sidebar',
-		( event ) => {
-			// This shortcut has no known clashes, but use preventDefault to prevent any
-			// obscure shortcuts from triggering.
-			event.preventDefault();
+	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {
+		// This shortcut has no known clashes, but use preventDefault to prevent any
+		// obscure shortcuts from triggering.
+		event.preventDefault();
 
-			if ( isBlockInspectorOpen ) {
-				disableComplementaryArea( STORE_NAME );
-			} else {
-				enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
-			}
-		},
-		{ bindGlobal: true }
-	);
+		if ( isBlockInspectorOpen ) {
+			disableComplementaryArea( STORE_NAME );
+		} else {
+			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+		}
+	} );
 
 	return null;
 }

package/src/components/navigation-sidebar/index.js

@@ -19,7 +19,7 @@ export const {
 export default function NavigationSidebar() {
 	const isNavigationOpen = useSelect( ( select ) => {
 		return select( editSiteStore ).isNavigationOpened();
-	} );
+	}, [] );
 
 	return (
 		<>

package/src/components/navigation-sidebar/navigation-panel/constants.js

@@ -3,6 +3,15 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_PART_AREA_HEADER,
+	TEMPLATE_PART_AREA_FOOTER,
+	TEMPLATE_PART_AREA_SIDEBAR,
+} from '../../../store/constants';
+
 export const TEMPLATES_PRIMARY = [
 	'index',
 	'singular',
@@ -75,10 +84,6 @@ export const MENU_TEMPLATE_PARTS_FOOTERS = 'template-parts-footers';
 export const MENU_TEMPLATE_PARTS_SIDEBARS = 'template-parts-sidebars';
 export const MENU_TEMPLATE_PARTS_GENERAL = 'template-parts-general';
 
-export const TEMPLATE_PART_AREA_HEADER = 'header';
-export const TEMPLATE_PART_AREA_FOOTER = 'footer';
-export const TEMPLATE_PART_AREA_SIDEBAR = 'sidebar';
-
 export const TEMPLATE_PARTS_SUB_MENUS = [
 	{
 		area: TEMPLATE_PART_AREA_HEADER,

package/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js

@@ -36,7 +36,7 @@ export default function ContentNavigationItem( { item } ) {
 			const template = select(
 				coreStore
 			).__experimentalGetTemplateForLink( item.link );
-			return template?.content?.raw;
+			return template?.content;
 		},
 		[ isPreviewVisible ]
 	);

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

@@ -4,6 +4,7 @@
 	width: 0;
 	overflow: hidden;
 	background: $gray-900;
+	color: $white;
 	transition: width 100ms linear;
 	@include reduce-motion("transition");
 

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

@@ -17,9 +17,10 @@
 	background: $gray-900;
 	border-radius: 0;
 	color: $white;
-	height: $header-height;
+	height: $header-height + $border-width;
 	width: $header-height;
 	z-index: 1;
+	margin-bottom: - $border-width;
 
 	&.has-icon {
 		min-width: $header-height;
@@ -44,7 +45,7 @@
 			bottom: 9px;
 			left: 9px;
 			border-radius: $radius-block-ui + $border-width + $border-width;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #23282e;
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
 		}
 
 		// Hover color.

package/src/components/save-button/index.js

@@ -27,7 +27,7 @@ export default function SaveButton( {
 				isSavingEntityRecord( record.kind, record.name, record.key )
 			),
 		};
-	} );
+	}, [] );
 
 	const disabled = ! isDirty || isSaving;
 

package/src/components/secondary-sidebar/inserter-sidebar.js

@@ -47,6 +47,7 @@ export default function InserterSidebar() {
 					__experimentalInsertionIndex={
 						insertionPoint.insertionIndex
 					}
+					__experimentalFilterValue={ insertionPoint.filterValue }
 				/>
 			</div>
 		</div>

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

@@ -1,176 +1,33 @@
-/**
- * External dependencies
- */
-import { map, sortBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { Button, PanelBody, TabPanel } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { getBlockType } from '@wordpress/blocks';
-import { useMemo } from '@wordpress/element';
+import { styles } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import {
-	useGlobalStylesContext,
-	useGlobalStylesReset,
-} from '../editor/global-styles-provider';
+import { useGlobalStylesReset } from '../editor/global-styles-provider';
 import DefaultSidebar from './default-sidebar';
-import {
-	default as TypographyPanel,
-	useHasTypographyPanel,
-} from './typography-panel';
-import { default as BorderPanel, useHasBorderPanel } from './border-panel';
-import { default as ColorPanel, useHasColorPanel } from './color-panel';
-import {
-	default as DimensionsPanel,
-	useHasDimensionsPanel,
-} from './dimensions-panel';
-
-function GlobalStylesPanel( {
-	wrapperPanelTitle,
-	context,
-	getStyle,
-	setStyle,
-	getSetting,
-	setSetting,
-} ) {
-	const hasBorderPanel = useHasBorderPanel( context );
-	const hasColorPanel = useHasColorPanel( context );
-	const hasTypographyPanel = useHasTypographyPanel( context );
-	const hasDimensionsPanel = useHasDimensionsPanel( context );
-
-	if ( ! hasColorPanel && ! hasTypographyPanel && ! hasDimensionsPanel ) {
-		return null;
-	}
-
-	const content = (
-		<>
-			{ hasTypographyPanel && (
-				<TypographyPanel
-					context={ context }
-					getStyle={ getStyle }
-					setStyle={ setStyle }
-				/>
-			) }
-			{ hasColorPanel && (
-				<ColorPanel
-					context={ context }
-					getStyle={ getStyle }
-					setStyle={ setStyle }
-					getSetting={ getSetting }
-					setSetting={ setSetting }
-				/>
-			) }
-			{ hasDimensionsPanel && (
-				<DimensionsPanel
-					context={ context }
-					getStyle={ getStyle }
-					setStyle={ setStyle }
-				/>
-			) }
-			{ hasBorderPanel && (
-				<BorderPanel
-					context={ context }
-					getStyle={ getStyle }
-					setStyle={ setStyle }
-				/>
-			) }
-		</>
-	);
-	if ( ! wrapperPanelTitle ) {
-		return content;
-	}
-	return (
-		<PanelBody title={ wrapperPanelTitle } initialOpen={ false }>
-			{ content }
-		</PanelBody>
-	);
-}
+import GlobalStyles from '../global-styles';
 
-function getPanelTitle( blockName ) {
-	const blockType = getBlockType( blockName );
-
-	// Protect against blocks that aren't registered
-	// eg: widget-area
-	if ( blockType === undefined ) {
-		return blockName;
-	}
-
-	return blockType.title;
-}
-
-function GlobalStylesBlockPanels( {
-	blocks,
-	getStyle,
-	setStyle,
-	getSetting,
-	setSetting,
-} ) {
-	const panels = useMemo(
-		() =>
-			sortBy(
-				map( blocks, ( block, name ) => {
-					return {
-						block,
-						name,
-						wrapperPanelTitle: getPanelTitle( name ),
-					};
-				} ),
-				( { wrapperPanelTitle } ) => wrapperPanelTitle
-			),
-		[ blocks ]
-	);
-
-	return map( panels, ( { block, name, wrapperPanelTitle } ) => {
-		return (
-			<GlobalStylesPanel
-				key={ 'panel-' + name }
-				wrapperPanelTitle={ wrapperPanelTitle }
-				context={ block }
-				getStyle={ getStyle }
-				setStyle={ setStyle }
-				getSetting={ getSetting }
-				setSetting={ setSetting }
-			/>
-		);
-	} );
-}
-
-export default function GlobalStylesSidebar( {
-	identifier,
-	title,
-	icon,
-	closeLabel,
-} ) {
-	const {
-		root,
-		blocks,
-		getStyle,
-		setStyle,
-		getSetting,
-		setSetting,
-	} = useGlobalStylesContext();
+export default function GlobalStylesSidebar() {
 	const [ canRestart, onReset ] = useGlobalStylesReset();
 
-	if ( typeof blocks !== 'object' || ! root ) {
-		// No sidebar is shown.
-		return null;
-	}
-
 	return (
 		<DefaultSidebar
 			className="edit-site-global-styles-sidebar"
-			identifier={ identifier }
-			title={ title }
-			icon={ icon }
-			closeLabel={ closeLabel }
+			identifier="edit-site/global-styles"
+			title={ __( 'Styles' ) }
+			icon={ styles }
+			closeLabel={ __( 'Close global styles sidebar' ) }
 			header={
 				<>
-					<strong>{ title }</strong>
+					<strong>{ __( 'Styles' ) }</strong>
+					<span className="edit-site-global-styles-sidebar__beta">
+						{ __( 'Beta' ) }
+					</span>
 					<Button
 						className="edit-site-global-styles-sidebar__reset-button"
 						isSmall
@@ -183,37 +40,7 @@ export default function GlobalStylesSidebar( {
 				</>
 			}
 		>
-			<TabPanel
-				tabs={ [
-					{ name: 'root', title: __( 'Root' ) },
-					{ name: 'block', title: __( 'By Block Type' ) },
-				] }
-			>
-				{ ( tab ) => {
-					/* Per Block Context */
-					if ( 'block' === tab.name ) {
-						return (
-							<GlobalStylesBlockPanels
-								blocks={ blocks }
-								getStyle={ getStyle }
-								setStyle={ setStyle }
-								getSetting={ getSetting }
-								setSetting={ setSetting }
-							/>
-						);
-					}
-					return (
-						<GlobalStylesPanel
-							hasWrapper={ false }
-							context={ root }
-							getStyle={ getStyle }
-							setStyle={ setStyle }
-							getSetting={ getSetting }
-							setSetting={ setSetting }
-						/>
-					);
-				} }
-			</TabPanel>
+			<GlobalStyles />
 		</DefaultSidebar>
 	);
 }