@wordpress/edit-site 5.15.0 → 5.16.0

package/build-style/style.css

@@ -1467,17 +1467,23 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 
 .edit-site-document-actions {
-  display: grid;
-  grid-template-columns: 1fr 2fr 1fr;
+  display: flex;
+  align-items: center;
   height: 36px;
+  justify-content: space-between;
   min-width: 0;
   background: #f0f0f0;
   border-radius: 4px;
   width: min(100%, 450px);
-  overflow: hidden;
 }
-.edit-site-document-actions:hover {
-  color: currentColor;
+.has-fixed-toolbar .edit-site-document-actions {
+  width: min(100%, 380px);
+}
+.edit-site-document-actions .components-button {
+  border-radius: 4px;
+}
+.edit-site-document-actions .components-button:hover {
+  color: var(--wp-block-synced-color);
   background: #e0e0e0;
 }
 @media (min-width: 782px) {
@@ -1490,28 +1496,34 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
     width: min(100%, 450px);
   }
 }
+.edit-site-document-actions.is-synced-entity .edit-site-document-actions__title {
+  color: var(--wp-block-synced-color);
+}
+.edit-site-document-actions.is-synced-entity .edit-site-document-actions__title h1 {
+  color: var(--wp-block-synced-color);
+}
 
 .edit-site-document-actions__command {
-  grid-column: 1/-1;
-  display: grid;
-  grid-template-columns: 1fr 2fr 1fr;
-  grid-row: 1;
+  flex-grow: 1;
+  color: var(--wp-block-synced-color);
+  overflow: hidden;
 }
 
 .edit-site-document-actions__title {
   flex-grow: 1;
-  color: var(--wp-block-synced-color);
   overflow: hidden;
-  grid-column: 2/3;
+}
+.edit-site-document-actions__title:hover {
+  color: var(--wp-block-synced-color);
 }
 .edit-site-document-actions__title .block-editor-block-icon {
   min-width: 24px;
+  flex-shrink: 0;
 }
 .edit-site-document-actions__title h1 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--wp-block-synced-color);
 }
 .edit-site-document-actions.is-page .edit-site-document-actions__title {
   color: #2f2f2f;
@@ -1538,31 +1550,25 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   }
 }
 
-.edit-site-document-actions__shortcut,
-.edit-site-document-actions__back {
-  color: #2f2f2f;
-}
-.edit-site-document-actions:hover .edit-site-document-actions__shortcut,
-.edit-site-document-actions:hover .edit-site-document-actions__back {
-  color: #1e1e1e;
-}
-
 .edit-site-document-actions__shortcut {
-  text-align: right;
+  color: #2f2f2f;
 }
 
-.edit-site-document-actions__back {
+.edit-site-document-actions__back.components-button.has-icon.has-text {
   min-width: 36px;
   flex-shrink: 0;
-  grid-column: 1/2;
-  grid-row: 1;
+  color: #757575;
+  gap: 0;
   z-index: 1;
 }
-.edit-site-document-actions.is-animated .edit-site-document-actions__back {
+.edit-site-document-actions__back.components-button.has-icon.has-text:hover {
+  color: currentColor;
+}
+.edit-site-document-actions.is-animated .edit-site-document-actions__back.components-button.has-icon.has-text {
   animation: edit-site-document-actions__slide-in-left 0.3s;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-site-document-actions.is-animated .edit-site-document-actions__back {
+  .edit-site-document-actions.is-animated .edit-site-document-actions__back.components-button.has-icon.has-text {
     animation-duration: 1ms;
     animation-delay: 0s;
   }
@@ -1767,7 +1773,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   color: #2f2f2f;
   background: #fff;
   flex-grow: 1;
-  overflow: auto;
+  overflow: hidden;
   margin: 0;
   margin-top: 60px;
 }
@@ -1780,8 +1786,7 @@ body.is-fullscreen-mode .edit-site-list-header {
 
 .edit-site-page-header {
   padding: 0 32px;
-  height: 60px;
-  padding-left: 32px;
+  min-height: 60px;
   border-bottom: 1px solid #f0f0f0;
   background: #fff;
   position: sticky;
@@ -1800,8 +1805,12 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 
 .edit-site-page-content {
-  padding: 32px 32px;
-  overflow-x: auto;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+  flex-flow: column;
+  position: relative;
+  z-index: 1;
 }
 
 .edit-site-patterns {
@@ -1812,13 +1821,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 0;
   overflow-x: auto;
 }
-.edit-site-patterns .edit-site-page-content {
-  height: 100%;
-  position: relative;
-  padding: 0;
-  display: flex;
-  flex-flow: column;
-}
 .edit-site-patterns .components-base-control {
   width: 100%;
 }
@@ -1867,6 +1869,9 @@ body.is-fullscreen-mode .edit-site-list-header {
     width: 300px;
   }
 }
+.edit-site-patterns .edit-site-patterns__sync-status-filter-option:not([aria-checked=true]) {
+  color: #949494;
+}
 .edit-site-patterns .edit-site-patterns__sync-status-filter-option:active {
   background: #757575;
   color: #f0f0f0;
@@ -1923,6 +1928,16 @@ body.is-fullscreen-mode .edit-site-list-header {
     grid-template-columns: 1fr 1fr;
   }
 }
+@media (min-width: 1440px) {
+  .edit-site-patterns__grid {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+@media (min-width: 1920px) {
+  .edit-site-patterns__grid {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
 .edit-site-patterns__grid .edit-site-patterns__pattern {
   break-inside: avoid-column;
   display: flex;
@@ -2001,6 +2016,7 @@ body.is-fullscreen-mode .edit-site-list-header {
 
 .edit-site-table-wrapper {
   width: 100%;
+  padding: 32px;
 }
 
 .edit-site-table {
@@ -2722,28 +2738,28 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   display: flex;
 }
 
-.edit-site-layout__sidebar {
+.edit-site-layout__sidebar-region {
   z-index: 1;
   width: 100vw;
   flex-shrink: 0;
 }
 @media (min-width: 782px) {
-  .edit-site-layout__sidebar {
+  .edit-site-layout__sidebar-region {
     width: 360px;
   }
 }
-.edit-site-layout.is-full-canvas .edit-site-layout__sidebar {
+.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
   position: fixed !important;
   height: 100vh;
   left: 0;
   top: 0;
 }
-.edit-site-layout__sidebar > div {
+.edit-site-layout__sidebar-region .edit-site-layout__sidebar {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-.edit-site-layout__sidebar .resizable-editor__drag-handle {
+.edit-site-layout__sidebar-region .resizable-editor__drag-handle {
   right: 0;
 }
 
@@ -2937,7 +2953,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   border-top: 1px solid #2f2f2f;
   flex-shrink: 0;
   margin: 0;
-  padding: 24px;
+  padding: 20px 24px;
 }
 
 .edit-site-save-hub__button {
@@ -3063,6 +3079,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-sidebar-navigation-screen__main {
   flex-grow: 1;
+  margin-bottom: 16px;
+}
+.edit-site-sidebar-navigation-screen__main.has-footer {
+  margin-bottom: 0;
 }
 
 .edit-site-sidebar-navigation-screen__content {
@@ -3284,6 +3304,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
   color: #949494;
   width: 100px;
+  flex-shrink: 0;
 }
 
 .edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value {
@@ -3404,6 +3425,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 }
 .edit-site-site-hub .edit-site-site-hub__site-view-link {
   flex-grow: 0;
+  margin-right: var(--wp-admin-border-width-focus);
 }
 @media (min-width: 480px) {
   .edit-site-site-hub .edit-site-site-hub__site-view-link {
@@ -3412,8 +3434,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   }
 }
 .edit-site-site-hub .edit-site-site-hub__site-view-link:focus {
-  outline: none;
-  box-shadow: none;
   opacity: 1;
 }
 .edit-site-site-hub .edit-site-site-hub__site-view-link svg {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.15.0",
+	"version": "5.16.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,43 +27,43 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.38.0",
-		"@wordpress/api-fetch": "^6.35.0",
-		"@wordpress/block-editor": "^12.6.0",
-		"@wordpress/block-library": "^8.15.0",
-		"@wordpress/blocks": "^12.15.0",
-		"@wordpress/commands": "^0.9.0",
-		"@wordpress/components": "^25.4.0",
-		"@wordpress/compose": "^6.15.0",
-		"@wordpress/core-commands": "^0.7.0",
-		"@wordpress/core-data": "^6.15.0",
-		"@wordpress/data": "^9.8.0",
-		"@wordpress/date": "^4.38.0",
-		"@wordpress/deprecated": "^3.38.0",
-		"@wordpress/dom": "^3.38.0",
-		"@wordpress/editor": "^13.15.0",
-		"@wordpress/element": "^5.15.0",
-		"@wordpress/escape-html": "^2.38.0",
-		"@wordpress/hooks": "^3.38.0",
-		"@wordpress/html-entities": "^3.38.0",
-		"@wordpress/i18n": "^4.38.0",
-		"@wordpress/icons": "^9.29.0",
-		"@wordpress/interface": "^5.15.0",
-		"@wordpress/keyboard-shortcuts": "^4.15.0",
-		"@wordpress/keycodes": "^3.38.0",
-		"@wordpress/media-utils": "^4.29.0",
-		"@wordpress/notices": "^4.6.0",
-		"@wordpress/plugins": "^6.6.0",
-		"@wordpress/preferences": "^3.15.0",
-		"@wordpress/primitives": "^3.36.0",
-		"@wordpress/private-apis": "^0.20.0",
-		"@wordpress/reusable-blocks": "^4.15.0",
-		"@wordpress/router": "^0.7.0",
-		"@wordpress/style-engine": "^1.21.0",
-		"@wordpress/url": "^3.39.0",
-		"@wordpress/viewport": "^5.15.0",
-		"@wordpress/widgets": "^3.15.0",
-		"@wordpress/wordcount": "^3.38.0",
+		"@wordpress/a11y": "^3.39.0",
+		"@wordpress/api-fetch": "^6.36.0",
+		"@wordpress/block-editor": "^12.7.0",
+		"@wordpress/block-library": "^8.16.0",
+		"@wordpress/blocks": "^12.16.0",
+		"@wordpress/commands": "^0.10.0",
+		"@wordpress/components": "^25.5.0",
+		"@wordpress/compose": "^6.16.0",
+		"@wordpress/core-commands": "^0.8.0",
+		"@wordpress/core-data": "^6.16.0",
+		"@wordpress/data": "^9.9.0",
+		"@wordpress/date": "^4.39.0",
+		"@wordpress/deprecated": "^3.39.0",
+		"@wordpress/dom": "^3.39.0",
+		"@wordpress/editor": "^13.16.0",
+		"@wordpress/element": "^5.16.0",
+		"@wordpress/escape-html": "^2.39.0",
+		"@wordpress/hooks": "^3.39.0",
+		"@wordpress/html-entities": "^3.39.0",
+		"@wordpress/i18n": "^4.39.0",
+		"@wordpress/icons": "^9.30.0",
+		"@wordpress/interface": "^5.16.0",
+		"@wordpress/keyboard-shortcuts": "^4.16.0",
+		"@wordpress/keycodes": "^3.39.0",
+		"@wordpress/media-utils": "^4.30.0",
+		"@wordpress/notices": "^4.7.0",
+		"@wordpress/plugins": "^6.7.0",
+		"@wordpress/preferences": "^3.16.0",
+		"@wordpress/primitives": "^3.37.0",
+		"@wordpress/private-apis": "^0.21.0",
+		"@wordpress/reusable-blocks": "^4.16.0",
+		"@wordpress/router": "^0.8.0",
+		"@wordpress/style-engine": "^1.22.0",
+		"@wordpress/url": "^3.40.0",
+		"@wordpress/viewport": "^5.16.0",
+		"@wordpress/widgets": "^3.16.0",
+		"@wordpress/wordcount": "^3.39.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
+	"gitHead": "b898cf1dc8e70841d1647ea0994ac6278acc18a7"
 }

package/src/components/add-new-pattern/index.js

@@ -65,6 +65,8 @@ export default function AddNewPattern() {
 		},
 	];
 
+	// Remove condition when command palette issues are resolved.
+	// See: https://github.com/WordPress/gutenberg/issues/52154.
 	if ( ! isTemplatePartsMode ) {
 		controls.push( {
 			icon: symbolFilled,

package/src/components/block-editor/use-site-editor-settings.js

@@ -17,6 +17,8 @@ function useArchiveLabel( templateSlug ) {
 	);
 	let taxonomy;
 	let term;
+	let isAuthor = false;
+	let authorSlug;
 	if ( taxonomyMatches ) {
 		// If is for a all taxonomies of a type
 		if ( taxonomyMatches[ 1 ] ) {
@@ -35,10 +37,19 @@ function useArchiveLabel( templateSlug ) {
 
 		//getTaxonomy( 'category' );
 		//wp.data.select('core').getEntityRecords( 'taxonomy', 'category', {slug: 'newcat'} );
+	} else {
+		const authorMatches = templateSlug?.match( /^(author)$|^author-(.+)$/ );
+		if ( authorMatches ) {
+			isAuthor = true;
+			if ( authorMatches[ 2 ] ) {
+				authorSlug = authorMatches[ 2 ];
+			}
+		}
 	}
 	return useSelect(
 		( select ) => {
-			const { getEntityRecords, getTaxonomy } = select( coreStore );
+			const { getEntityRecords, getTaxonomy, getAuthors } =
+				select( coreStore );
 			let archiveTypeLabel;
 			let archiveNameLabel;
 			if ( taxonomy ) {
@@ -54,12 +65,21 @@ function useArchiveLabel( templateSlug ) {
 					archiveNameLabel = records[ 0 ].name;
 				}
 			}
+			if ( isAuthor ) {
+				archiveTypeLabel = 'Author';
+				if ( authorSlug ) {
+					const authorRecords = getAuthors( { slug: authorSlug } );
+					if ( authorRecords && authorRecords[ 0 ] ) {
+						archiveNameLabel = authorRecords[ 0 ].name;
+					}
+				}
+			}
 			return {
 				archiveTypeLabel,
 				archiveNameLabel,
 			};
 		},
-		[ taxonomy, term ]
+		[ authorSlug, isAuthor, taxonomy, term ]
 	);
 }
 

package/src/components/editor/index.js

@@ -58,9 +58,10 @@ const interfaceLabels = {
 };
 
 const typeLabels = {
-	wp_template: __( 'Template Part' ),
+	wp_template: __( 'Template' ),
 	wp_template_part: __( 'Template Part' ),
 	wp_block: __( 'Pattern' ),
+	wp_navigation: __( 'Navigation' ),
 };
 
 // Prevent accidental removal of certain blocks, asking the user for
@@ -165,12 +166,11 @@ export default function Editor( { isLoading } ) {
 
 	let title;
 	if ( hasLoadedPost ) {
-		const type = typeLabels[ editedPostType ] ?? __( 'Template' );
 		title = sprintf(
 			// translators: A breadcrumb trail in browser tab. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
 			__( '%1$s ‹ %2$s ‹ Editor' ),
 			getTitle(),
-			type
+			typeLabels[ editedPostType ] ?? typeLabels.wp_template
 		);
 	}
 

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

@@ -31,7 +31,7 @@ export function mergeBaseAndUserConfigs( base, user ) {
 }
 
 function useGlobalStylesUserConfig() {
-	const { globalStylesId, isReady, settings, styles } = useSelect(
+	const { globalStylesId, isReady, settings, styles, behaviors } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
@@ -65,6 +65,7 @@ function useGlobalStylesUserConfig() {
 				isReady: hasResolved,
 				settings: record?.settings,
 				styles: record?.styles,
+				behaviors: record?.behaviors,
 			};
 		},
 		[]
@@ -76,8 +77,9 @@ function useGlobalStylesUserConfig() {
 		return {
 			settings: settings ?? {},
 			styles: styles ?? {},
+			behaviors: behaviors ?? {},
 		};
-	}, [ settings, styles ] );
+	}, [ settings, styles, behaviors ] );
 
 	const setConfig = useCallback(
 		( callback, options = {} ) => {
@@ -89,6 +91,7 @@ function useGlobalStylesUserConfig() {
 			const currentConfig = {
 				styles: record?.styles ?? {},
 				settings: record?.settings ?? {},
+				behaviors: record?.behaviors ?? {},
 			};
 			const updatedConfig = callback( currentConfig );
 			editEntityRecord(
@@ -98,6 +101,8 @@ function useGlobalStylesUserConfig() {
 				{
 					styles: cleanEmptyObject( updatedConfig.styles ) || {},
 					settings: cleanEmptyObject( updatedConfig.settings ) || {},
+					behaviors:
+						cleanEmptyObject( updatedConfig.behaviors ) || {},
 				},
 				options
 			);

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

@@ -61,12 +61,15 @@ const {
 	useHasDimensionsPanel,
 	useHasTypographyPanel,
 	useHasBorderPanel,
+	__experimentalUseHasBehaviorsPanel: useHasBehaviorsPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
 	useHasColorPanel,
 	useHasEffectsPanel,
 	useHasFiltersPanel,
 	useGlobalStyle,
+	__experimentalUseGlobalBehaviors: useGlobalBehaviors,
+	__experimentalBehaviorsPanel: StylesBehaviorsPanel,
 	BorderPanel: StylesBorderPanel,
 	ColorPanel: StylesColorPanel,
 	TypographyPanel: StylesTypographyPanel,
@@ -91,10 +94,14 @@ function ScreenBlock( { name, variation } ) {
 	} );
 	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
+	const { inheritedBehaviors, setBehavior } = useGlobalBehaviors( name );
+	const { behavior } = useGlobalBehaviors( name, 'user' );
+
 	const blockType = getBlockType( name );
 	const blockVariations = useBlockVariations( name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
+	const hasBehaviorsPanel = useHasBehaviorsPanel( rawSettings, name );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasEffectsPanel = useHasEffectsPanel( settings );
@@ -267,6 +274,14 @@ function ScreenBlock( { name, variation } ) {
 						onChange={ setStyle }
 						inheritedValue={ inheritedStyle }
 					/>
+					{ hasBehaviorsPanel && (
+						<StylesBehaviorsPanel
+							value={ behavior }
+							onChange={ setBehavior }
+							behaviors={ inheritedBehaviors }
+							blockName={ name }
+						></StylesBehaviorsPanel>
+					) }
 				</PanelBody>
 			) }
 		</>