@wordpress/edit-site 4.3.5 → 4.5.0

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

@@ -26,15 +26,12 @@ import { useEffect, useState, useContext } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
 import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-
 /**
  * Internal dependencies
  */
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR } from './utils';
 import { GlobalStylesContext } from './context';
+import { useSetting } from './hooks';
 
 function compileStyleValue( uncompiledValue ) {
 	const VARIABLE_REFERENCE_PREFIX = 'var:';
@@ -363,7 +360,7 @@ export const toCustomProperties = ( tree, blockSelectors ) => {
 	return ruleset;
 };
 
-export const toStyles = ( tree, blockSelectors ) => {
+export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
 
@@ -402,6 +399,26 @@ export const toStyles = ( tree, blockSelectors ) => {
 		ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
 	} );
 
+	/* Add alignment / layout styles */
+	ruleset =
+		ruleset +
+		'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
+	ruleset =
+		ruleset +
+		'.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
+	ruleset =
+		ruleset +
+		'.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+
+	if ( hasBlockGapSupport ) {
+		ruleset =
+			ruleset +
+			'.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
+		ruleset =
+			ruleset +
+			'.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
+	}
+
 	nodesWithSettings.forEach( ( { selector, presets } ) => {
 		if ( ROOT_BLOCK_SELECTOR === selector ) {
 			// Do not add extra specificity for top-level classes.
@@ -448,6 +465,8 @@ export function useGlobalStylesOutput() {
 	const [ settings, setSettings ] = useState( {} );
 	const [ svgFilters, setSvgFilters ] = useState( {} );
 	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	const [ blockGap ] = useSetting( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGap !== null;
 
 	useEffect( () => {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
@@ -459,7 +478,11 @@ export function useGlobalStylesOutput() {
 			mergedConfig,
 			blockSelectors
 		);
-		const globalStyles = toStyles( mergedConfig, blockSelectors );
+		const globalStyles = toStyles(
+			mergedConfig,
+			blockSelectors,
+			hasBlockGapSupport
+		);
 		const filters = toSvgFilters( mergedConfig, blockSelectors );
 		setStylesheets( [
 			{
@@ -475,5 +498,5 @@ export function useGlobalStylesOutput() {
 		setSvgFilters( filters );
 	}, [ mergedConfig ] );
 
-	return [ stylesheets, settings, svgFilters ];
+	return [ stylesheets, settings, svgFilters, hasBlockGapSupport ];
 }

package/src/components/header/style.scss

@@ -104,8 +104,9 @@ body.is-navigation-sidebar-open {
 	margin: 0 -6px 0;
 }
 
+
 /**
- * Buttons in the Toolbar
+ * Buttons on the right side
  */
 
 .edit-site-header__actions {
@@ -113,36 +114,23 @@ body.is-navigation-sidebar-open {
 	align-items: center;
 	padding-right: $grid-unit-05;
 
-	.interface-pinned-items {
-		display: none;
-
-		@include break-medium() {
-			display: inline-flex;
-		}
+	@include break-small () {
+		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
 	}
 
-	// Adjust button paddings to scale better to mobile.
-	.editor-post-saved-state,
-	.components-button.components-button {
-		margin-right: $grid-unit-05;
-
-		@include break-small() {
-			margin-right: $grid-unit-15;
-		}
-	}
+	gap: $grid-unit-05;
 
-	.editor-post-saved-state,
-	.components-button.is-tertiary {
-		padding: 0 #{$grid-unit-15 * 0.5};
+	@include break-small() {
+		gap: $grid-unit-10;
 	}
 
-	.edit-site-more-menu .components-button,
-	.interface-pinned-items .components-button {
-		margin-right: 0;
-	}
+	// Pinned items.
+	.interface-pinned-items {
+		display: none;
 
-	@include break-small() {
-		padding-right: $grid-unit-20;
+		@include break-medium() {
+			display: inline-flex;
+		}
 	}
 }
 
@@ -192,11 +180,8 @@ body.is-navigation-sidebar-open {
 	.edit-site-save-button__button {
 		padding-left: 6px;
 		padding-right: 6px;
-		margin-right: $grid-unit-05;
-	}
-	.block-editor-post-preview__button-toggle {
-		margin-right: $grid-unit-05;
 	}
+
 	// The inserter and the template details toggle have custom labels, different from their aria-label, so we don't want to display both.
 	.edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
 	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -59,11 +59,7 @@ export default function ListViewSidebar() {
 					focusOnMountRef,
 				] ) }
 			>
-				<ListView
-					showNestedBlocks
-					__experimentalFeatures
-					__experimentalPersistentListViewFeatures
-				/>
+				<ListView />
 			</div>
 		</div>
 	);

package/src/components/sidebar/index.js

@@ -4,7 +4,7 @@
 import { createSlotFill, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { cog } from '@wordpress/icons';
-import { useEffect } from '@wordpress/element';
+import { useEffect, Fragment } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -62,7 +62,7 @@ export function SidebarComplementaryAreaFills() {
 	// Conditionally include NavMenu sidebar in Plugin only.
 	// Optimise for dead code elimination.
 	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
-	let MaybeNavigationMenuSidebar = 'Fragment';
+	let MaybeNavigationMenuSidebar = Fragment;
 
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		MaybeNavigationMenuSidebar = NavigationMenuSidebar;

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

@@ -16,7 +16,7 @@ export default function NavigationMenuSidebar() {
 		<DefaultSidebar
 			className="edit-site-navigation-menu-sidebar"
 			identifier="edit-site/navigation-menu"
-			title={ __( 'Navigation Menus' ) }
+			title={ __( 'Navigation' ) }
 			icon={ navigation }
 			closeLabel={ __( 'Close navigation menu sidebar' ) }
 			panelClassName="edit-site-navigation-menu-sidebar__panel"
@@ -24,6 +24,9 @@ export default function NavigationMenuSidebar() {
 				<Flex>
 					<FlexBlock>
 						<strong>{ __( 'Navigation Menus' ) }</strong>
+						<span className="edit-site-navigation-sidebar__beta">
+							{ __( 'Beta' ) }
+						</span>
 					</FlexBlock>
 				</Flex>
 			}

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

@@ -50,13 +50,7 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 	}, [ updateBlockListSettings, innerBlocks ] );
 	return (
 		<>
-			<ListView
-				id={ id }
-				showNestedBlocks
-				expandNested={ false }
-				__experimentalFeatures
-				__experimentalPersistentListViewFeatures
-			/>
+			<ListView id={ id } />
 		</>
 	);
 }

package/src/components/sidebar/style.scss

@@ -74,6 +74,7 @@
 	padding: $grid-unit-20;
 }
 
+.edit-site-navigation-sidebar__beta,
 .edit-site-global-styles-sidebar__beta {
 	display: inline-flex;
 	margin-left: $grid-unit-10;
@@ -86,3 +87,58 @@
 	font-size: $helptext-font-size;
 	line-height: 1;
 }
+
+
+.edit-site-global-styles-sidebar__border-box-control__popover,
+.edit-site-global-styles-sidebar__border-box-control__popover-top,
+.edit-site-global-styles-sidebar__border-box-control__popover-right,
+.edit-site-global-styles-sidebar__border-box-control__popover-bottom,
+.edit-site-global-styles-sidebar__border-box-control__popover-left {
+	.components-popover__content {
+		width: 282px;
+	}
+}
+
+$split-border-control-offset: 55px;
+
+@include break-medium() {
+	.edit-site-global-styles-sidebar__border-box-control__popover,
+	.edit-site-global-styles-sidebar__border-box-control__popover-left {
+		.components-popover__content {
+			margin-right: #{ $grid-unit-50 + $grid-unit-15 } !important;
+		}
+	}
+
+	.edit-site-global-styles-sidebar__border-box-control__popover-top,
+	.edit-site-global-styles-sidebar__border-box-control__popover-bottom {
+		.components-popover__content {
+			margin-right: #{ $grid-unit-50 + $grid-unit-15 + $split-border-control-offset } !important;
+		}
+	}
+
+	.edit-site-global-styles-sidebar__border-box-control__popover-right {
+		.components-popover__content {
+			margin-right: #{ $grid-unit-50 + $grid-unit-15 + ( $split-border-control-offset * 2 )} !important;
+		}
+	}
+
+	.edit-site-global-styles-sidebar__border-box-control__popover,
+	.edit-site-global-styles-sidebar__border-box-control__popover-top,
+	.edit-site-global-styles-sidebar__border-box-control__popover-right,
+	.edit-site-global-styles-sidebar__border-box-control__popover-bottom,
+	.edit-site-global-styles-sidebar__border-box-control__popover-left {
+		&.is-from-top .components-popover__content {
+			margin-top: #{ -($grid-unit-50 + $grid-unit-15) } !important;
+		}
+
+		&.is-from-bottom .components-popover__content {
+			margin-bottom: #{ -($grid-unit-50 + $grid-unit-15) } !important;
+		}
+	}
+}
+
+// Override the `hr` styles defined in the `ComplementaryArea` component
+// from the `@wordpress/interface` package.
+.edit-site-global-styles-sidebar hr {
+	margin: 0;
+}

package/src/index.js

@@ -103,7 +103,6 @@ export function initializeEditor( id, settings ) {
 	settings.__experimentalFetchLinkSuggestions = ( search, searchOptions ) =>
 		fetchLinkSuggestions( search, searchOptions, settings );
 	settings.__experimentalFetchRichUrlData = fetchUrlData;
-	settings.__experimentalSpotlightEntityBlocks = [ 'core/template-part' ];
 
 	const target = document.getElementById( id );