@wordpress/edit-site 4.12.1-next.d6164808d3.0 → 4.14.0

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

@@ -1,16 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	first,
-	forEach,
-	get,
-	isEmpty,
-	kebabCase,
-	pickBy,
-	reduce,
-	set,
-} from 'lodash';
+import { get, isEmpty, kebabCase, pickBy, reduce, set } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -208,7 +199,7 @@ export function getStylesDeclarations(
 				return declarations;
 			}
 			const pathToValue = value;
-			if ( first( pathToValue ) === 'elements' || useEngine ) {
+			if ( pathToValue[ 0 ] === 'elements' || useEngine ) {
 				return declarations;
 			}
 
@@ -330,8 +321,8 @@ export function getLayoutStyles( {
 	if ( gapValue && tree?.settings?.layout?.definitions ) {
 		Object.values( tree.settings.layout.definitions ).forEach(
 			( { className, name, spacingStyles } ) => {
-				// Allow skipping default layout for themes that opt-in to block styles, but opt-out of blockGap.
-				if ( ! hasBlockGapSupport && 'default' === name ) {
+				// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
+				if ( ! hasBlockGapSupport && 'flex' !== name ) {
 					return;
 				}
 
@@ -457,7 +448,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 		} );
 	}
 
-	forEach( ELEMENTS, ( selector, name ) => {
+	Object.entries( ELEMENTS ).forEach( ( [ name, selector ] ) => {
 		if ( !! tree.styles?.elements[ name ] ) {
 			nodes.push( {
 				styles: tree.styles?.elements[ name ],
@@ -467,42 +458,53 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	} );
 
 	// Iterate over blocks: they can have styles & elements.
-	forEach( tree.styles?.blocks, ( node, blockName ) => {
-		const blockStyles = pickStyleKeys( node );
-		if ( !! blockStyles && !! blockSelectors?.[ blockName ]?.selector ) {
-			nodes.push( {
-				duotoneSelector: blockSelectors[ blockName ].duotoneSelector,
-				fallbackGapValue: blockSelectors[ blockName ].fallbackGapValue,
-				hasLayoutSupport: blockSelectors[ blockName ].hasLayoutSupport,
-				selector: blockSelectors[ blockName ].selector,
-				styles: blockStyles,
-				featureSelectors: blockSelectors[ blockName ].featureSelectors,
-			} );
-		}
-
-		forEach( node?.elements, ( value, elementName ) => {
+	Object.entries( tree.styles?.blocks ?? {} ).forEach(
+		( [ blockName, node ] ) => {
+			const blockStyles = pickStyleKeys( node );
 			if (
-				!! value &&
-				!! blockSelectors?.[ blockName ] &&
-				!! ELEMENTS?.[ elementName ]
+				!! blockStyles &&
+				!! blockSelectors?.[ blockName ]?.selector
 			) {
 				nodes.push( {
-					styles: value,
-					selector: blockSelectors[ blockName ].selector
-						.split( ',' )
-						.map( ( sel ) => {
-							const elementSelectors =
-								ELEMENTS[ elementName ].split( ',' );
-							return elementSelectors.map(
-								( elementSelector ) =>
-									sel + ' ' + elementSelector
-							);
-						} )
-						.join( ',' ),
+					duotoneSelector:
+						blockSelectors[ blockName ].duotoneSelector,
+					fallbackGapValue:
+						blockSelectors[ blockName ].fallbackGapValue,
+					hasLayoutSupport:
+						blockSelectors[ blockName ].hasLayoutSupport,
+					selector: blockSelectors[ blockName ].selector,
+					styles: blockStyles,
+					featureSelectors:
+						blockSelectors[ blockName ].featureSelectors,
 				} );
 			}
-		} );
-	} );
+
+			Object.entries( node?.elements ?? {} ).forEach(
+				( [ elementName, value ] ) => {
+					if (
+						!! value &&
+						!! blockSelectors?.[ blockName ] &&
+						!! ELEMENTS?.[ elementName ]
+					) {
+						nodes.push( {
+							styles: value,
+							selector: blockSelectors[ blockName ].selector
+								.split( ',' )
+								.map( ( sel ) => {
+									const elementSelectors =
+										ELEMENTS[ elementName ].split( ',' );
+									return elementSelectors.map(
+										( elementSelector ) =>
+											sel + ' ' + elementSelector
+									);
+								} )
+								.join( ',' ),
+						} );
+					}
+				}
+			);
+		}
+	);
 
 	return nodes;
 };
@@ -537,17 +539,19 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 	}
 
 	// Blocks.
-	forEach( tree.settings?.blocks, ( node, blockName ) => {
-		const blockPresets = pickPresets( node );
-		const blockCustom = node.custom;
-		if ( ! isEmpty( blockPresets ) || !! blockCustom ) {
-			nodes.push( {
-				presets: blockPresets,
-				custom: blockCustom,
-				selector: blockSelectors[ blockName ].selector,
-			} );
+	Object.entries( tree.settings?.blocks ?? {} ).forEach(
+		( [ blockName, node ] ) => {
+			const blockPresets = pickPresets( node );
+			const blockCustom = node.custom;
+			if ( ! isEmpty( blockPresets ) || !! blockCustom ) {
+				nodes.push( {
+					presets: blockPresets,
+					custom: blockCustom,
+					selector: blockSelectors[ blockName ].selector,
+				} );
+			}
 		}
-	} );
+	);
 
 	return nodes;
 };
@@ -601,8 +605,13 @@ export const toStyles = (
 	}
 
 	if ( useRootPaddingAlign ) {
-		ruleset +=
-			'padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left);';
+		ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } 
+			.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } 
+			.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; } 
+			.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } 
+			.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; } 
+			.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } 
+			.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
 	}
 
 	ruleset += '}';

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

@@ -79,7 +79,7 @@ export const PRESET_METADATA = [
 	},
 	{
 		path: [ 'spacing', 'spacingSizes' ],
-		valueKey: 'spacingSizes',
+		valueKey: 'size',
 		cssVarInfix: 'spacing',
 		valueFunc: ( { size } ) => size,
 		classes: [],

package/src/components/header/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -7,11 +12,12 @@ import {
 	ToolSelector,
 	__experimentalPreviewOptions as PreviewOptions,
 	NavigableToolbar,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
 import { _x, __ } from '@wordpress/i18n';
-import { listView, plus, external } from '@wordpress/icons';
+import { listView, plus, external, chevronUpDown } from '@wordpress/icons';
 import {
 	Button,
 	ToolbarItem,
@@ -55,6 +61,7 @@ export default function Header( {
 		isLoaded,
 		isVisualMode,
 		settings,
+		blockEditorMode,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -69,6 +76,7 @@ export default function Header( {
 		const { __experimentalGetTemplateInfo: getTemplateInfo } =
 			select( editorStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
 
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
@@ -88,6 +96,7 @@ export default function Header( {
 			),
 			isVisualMode: getEditorMode() === 'visual',
 			settings: getSettings(),
+			blockEditorMode: __unstableGetEditorMode(),
 		};
 	}, [] );
 
@@ -96,6 +105,7 @@ export default function Header( {
 		setIsInserterOpened,
 		setIsListViewOpened,
 	} = useDispatch( editSiteStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -122,6 +132,10 @@ export default function Header( {
 	);
 	const shortLabel = ! isInserterOpen ? __( 'Add' ) : __( 'Close' );
 
+	const isZoomedOutViewExperimentEnabled =
+		window?.__experimentalEnableZoomedOutView && isVisualMode;
+	const isZoomedOutView = blockEditorMode === 'zoom-out';
+
 	return (
 		<div className="edit-site-header">
 			<NavigableToolbar
@@ -169,8 +183,8 @@ export default function Header( {
 							<ToolbarItem
 								as={ Button }
 								className="edit-site-header-toolbar__list-view-toggle"
+								disabled={ ! isVisualMode && isZoomedOutView }
 								icon={ listView }
-								disabled={ ! isVisualMode }
 								isPressed={ isListViewOpen }
 								/* translators: button label text should, if possible, be under 16 characters. */
 								label={ __( 'List View' ) }
@@ -181,6 +195,25 @@ export default function Header( {
 									showIconLabels ? 'tertiary' : undefined
 								}
 							/>
+							{ isZoomedOutViewExperimentEnabled && (
+								<ToolbarItem
+									as={ Button }
+									className="edit-site-header-toolbar__zoom-out-view-toggle"
+									icon={ chevronUpDown }
+									isPressed={ isZoomedOutView }
+									/* translators: button label text should, if possible, be under 16 characters. */
+									label={ __( 'Zoom-out View' ) }
+									onClick={ () => {
+										setPreviewDeviceType( 'desktop' );
+										setIsListViewOpened( false );
+										__unstableSetEditorMode(
+											isZoomedOutView
+												? 'edit'
+												: 'zoom-out'
+										);
+									} }
+								/>
+							) }
 						</>
 					) }
 				</div>
@@ -209,26 +242,33 @@ export default function Header( {
 			<div className="edit-site-header_end">
 				<div className="edit-site-header__actions">
 					{ ! isFocusMode && (
-						<PreviewOptions
-							deviceType={ deviceType }
-							setDeviceType={ setPreviewDeviceType }
+						<div
+							className={ classnames(
+								'edit-site-header__actions__preview-options',
+								{ 'is-zoomed-out': isZoomedOutView }
+							) }
 						>
-							<MenuGroup>
-								<MenuItem
-									href={ settings?.siteUrl }
-									target="_blank"
-									icon={ external }
-								>
-									{ __( 'View site' ) }
-									<VisuallyHidden as="span">
-										{
-											/* translators: accessibility text */
-											__( '(opens in a new tab)' )
-										}
-									</VisuallyHidden>
-								</MenuItem>
-							</MenuGroup>
-						</PreviewOptions>
+							<PreviewOptions
+								deviceType={ deviceType }
+								setDeviceType={ setPreviewDeviceType }
+							>
+								<MenuGroup>
+									<MenuItem
+										href={ settings?.siteUrl }
+										target="_blank"
+										icon={ external }
+									>
+										{ __( 'View site' ) }
+										<VisuallyHidden as="span">
+											{
+												/* translators: accessibility text */
+												__( '(opens in a new tab)' )
+											}
+										</VisuallyHidden>
+									</MenuItem>
+								</MenuGroup>
+							</PreviewOptions>
+						</div>
 					) }
 					<SaveButton
 						openEntitiesSavedStates={ openEntitiesSavedStates }

package/src/components/header/style.scss

@@ -135,6 +135,15 @@ body.is-navigation-sidebar-open {
 	}
 }
 
+.edit-site-header__actions__preview-options {
+	opacity: 1;
+	transition: opacity 0.3s;
+
+	&.is-zoomed-out {
+		opacity: 0;
+	}
+}
+
 .edit-site-header__actions-more-menu {
 	margin-left: -4px;
 

package/src/components/list/header.js

@@ -9,10 +9,18 @@ import { __experimentalHeading as Heading } from '@wordpress/components';
  * Internal dependencies
  */
 import AddNewTemplate from '../add-new-template';
+import { store as editSiteStore } from '../../store';
 
 export default function Header( { templateType } ) {
-	const postType = useSelect(
-		( select ) => select( coreStore ).getPostType( templateType ),
+	const { canCreate, postType } = useSelect(
+		( select ) => {
+			const { supportsTemplatePartsMode } =
+				select( editSiteStore ).getSettings();
+			return {
+				postType: select( coreStore ).getPostType( templateType ),
+				canCreate: ! supportsTemplatePartsMode,
+			};
+		},
 		[ templateType ]
 	);
 
@@ -26,9 +34,11 @@ export default function Header( { templateType } ) {
 				{ postType.labels?.name }
 			</Heading>
 
-			<div className="edit-site-list-header__right">
-				<AddNewTemplate templateType={ templateType } />
-			</div>
+			{ canCreate && (
+				<div className="edit-site-list-header__right">
+					<AddNewTemplate templateType={ templateType } />
+				</div>
+			) }
 		</header>
 	);
 }

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

@@ -40,22 +40,23 @@ function NavLink( { params, replace, ...props } ) {
 }
 
 const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
-	const { homeTemplate, isNavigationOpen, siteTitle } = useSelect(
-		( select ) => {
+	const { homeTemplate, isNavigationOpen, isTemplatePartsMode, siteTitle } =
+		useSelect( ( select ) => {
 			const { getEntityRecord } = select( coreDataStore );
 			const { getSettings, isNavigationOpened } = select( editSiteStore );
 
 			const siteData =
 				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+			const { supportsTemplatePartsMode, __unstableHomeTemplate } =
+				getSettings();
 
 			return {
 				siteTitle: siteData.name,
-				homeTemplate: getSettings().__unstableHomeTemplate,
+				homeTemplate: __unstableHomeTemplate,
 				isNavigationOpen: isNavigationOpened(),
+				isTemplatePartsMode: !! supportsTemplatePartsMode,
 			};
-		},
-		[]
-	);
+		}, [] );
 	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	const closeOnEscape = ( event ) => {
@@ -91,24 +92,29 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 
 						<NavigationMenu>
 							<NavigationGroup title={ __( 'Editor' ) }>
-								<NavLink
-									icon={ siteIcon }
-									title={ __( 'Site' ) }
-									item={ SITE_EDITOR_KEY }
-									params={ {
-										postId: homeTemplate?.postId,
-										postType: homeTemplate?.postType,
-									} }
-								/>
-								<NavLink
-									icon={ templateIcon }
-									title={ __( 'Templates' ) }
-									item="wp_template"
-									params={ {
-										postId: undefined,
-										postType: 'wp_template',
-									} }
-								/>
+								{ ! isTemplatePartsMode && (
+									<>
+										<NavLink
+											icon={ siteIcon }
+											title={ __( 'Site' ) }
+											item={ SITE_EDITOR_KEY }
+											params={ {
+												postId: homeTemplate?.postId,
+												postType:
+													homeTemplate?.postType,
+											} }
+										/>
+										<NavLink
+											icon={ templateIcon }
+											title={ __( 'Templates' ) }
+											item="wp_template"
+											params={ {
+												postId: undefined,
+												postType: 'wp_template',
+											} }
+										/>
+									</>
+								) }
 								<NavLink
 									icon={ templatePartIcon }
 									title={ __( 'Template Parts' ) }

package/src/components/sidebar/index.js

@@ -19,6 +19,7 @@ import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
 import TemplateCard from './template-card';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
+import { store as editSiteStore } from '../../store';
 
 const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
 	'EditSiteSidebarInspector'
@@ -26,25 +27,27 @@ const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
 export const SidebarInspectorFill = InspectorFill;
 
 export function SidebarComplementaryAreaFills() {
-	const { sidebar, isEditorSidebarOpened, hasBlockSelection } = useSelect(
-		( select ) => {
-			const _sidebar =
-				select( interfaceStore ).getActiveComplementaryArea(
-					STORE_NAME
-				);
-			const _isEditorSidebarOpened = [
-				SIDEBAR_BLOCK,
-				SIDEBAR_TEMPLATE,
-			].includes( _sidebar );
-			return {
-				sidebar: _sidebar,
-				isEditorSidebarOpened: _isEditorSidebarOpened,
-				hasBlockSelection:
-					!! select( blockEditorStore ).getBlockSelectionStart(),
-			};
-		},
-		[]
-	);
+	const {
+		sidebar,
+		isEditorSidebarOpened,
+		hasBlockSelection,
+		supportsGlobalStyles,
+	} = useSelect( ( select ) => {
+		const _sidebar =
+			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
+		const _isEditorSidebarOpened = [
+			SIDEBAR_BLOCK,
+			SIDEBAR_TEMPLATE,
+		].includes( _sidebar );
+		const settings = select( editSiteStore ).getSettings();
+		return {
+			sidebar: _sidebar,
+			isEditorSidebarOpened: _isEditorSidebarOpened,
+			hasBlockSelection:
+				!! select( blockEditorStore ).getBlockSelectionStart(),
+			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
+		};
+	}, [] );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
 	useEffect( () => {
@@ -89,7 +92,7 @@ export function SidebarComplementaryAreaFills() {
 					<InspectorSlot bubblesVirtually />
 				) }
 			</DefaultSidebar>
-			<GlobalStylesSidebar />
+			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
 			<MaybeNavigationMenuSidebar />
 		</>
 	);

package/src/components/template-part-converter/convert-to-template-part.js

@@ -6,7 +6,7 @@ import { kebabCase } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	BlockSettingsMenuControls,
 	store as blockEditorStore,
@@ -23,6 +23,7 @@ import { symbolFilled } from '@wordpress/icons';
  * Internal dependencies
  */
 import CreateTemplatePartModal from '../create-template-part-modal';
+import { store as editSiteStore } from '../../store';
 
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
@@ -30,6 +31,18 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
+	const { canCreate } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			canCreate: ! supportsTemplatePartsMode,
+		};
+	}, [] );
+
+	if ( ! canCreate ) {
+		return null;
+	}
+
 	const onConvert = async ( { title, area } ) => {
 		// Currently template parts only allow latin chars.
 		// Fallback slug will receive suffix by default.

package/src/index.js

@@ -107,6 +107,10 @@ export function reinitializeEditor( target, settings ) {
 		}
 	}
 
+	// Prevent the default browser action for files dropped outside of dropzones.
+	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
+	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
+
 	render( <EditSiteApp reboot={ reboot } />, target );
 }
 

package/src/style.scss

@@ -26,6 +26,7 @@ html.wp-toolbar {
 	background: $white;
 }
 
+body.appearance_page_gutenberg-template-parts,
 body.site-editor-php {
 	@include wp-admin-reset(".edit-site");
 }