@wordpress/edit-site 6.2.0 → 6.3.0

package/build-style/style.css

@@ -213,19 +213,6 @@
 .dataviews-view-table tr .dataviews-view-table-header-button {
   gap: 4px;
 }
-.dataviews-view-table tr th:first-child, .dataviews-view-table tr th:last-child,
-.dataviews-view-table tr td:first-child,
-.dataviews-view-table tr td:last-child {
-  transition: padding ease-out 0.1s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .dataviews-view-table tr th:first-child, .dataviews-view-table tr th:last-child,
-.dataviews-view-table tr td:first-child,
-.dataviews-view-table tr td:last-child {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
 .dataviews-view-table tr td:first-child,
 .dataviews-view-table tr th:first-child {
   padding-left: 48px;
@@ -287,9 +274,12 @@
   box-shadow: inset 0 -1px 0 #f0f0f0;
   padding-top: 8px;
   padding-bottom: 8px;
+  padding-left: 12px;
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 500;
+}
+.dataviews-view-table thead th:has(.dataviews-view-table-header-button):not(:first-child) {
   padding-left: 4px;
 }
 .dataviews-view-table tbody td {
@@ -339,7 +329,6 @@
   color: #757575;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: block;
   width: 100%;
 }
 .dataviews-view-list__primary-field a,
@@ -424,17 +413,12 @@
 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
   color: #1e1e1e;
 }
-.dataviews-view-grid .dataviews-view-grid__card.is-selected .page-pages-preview-field__button::after {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-}
 .dataviews-view-grid .dataviews-view-grid__media {
   width: 100%;
   min-height: 200px;
   aspect-ratio: 1/1;
   background-color: #f0f0f0;
   border-radius: 4px;
-  overflow: hidden;
   position: relative;
 }
 .dataviews-view-grid .dataviews-view-grid__media img {
@@ -515,7 +499,7 @@
   right: 0;
 }
 .dataviews-view-list li.is-selected .dataviews-view-list__item-actions, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions {
-  padding-right: 32px;
+  padding-right: 24px;
 }
 .dataviews-view-list li.is-selected .dataviews-view-list__item-actions .components-button, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions .components-button, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions .components-button {
   opacity: 1;
@@ -607,7 +591,7 @@
   display: none;
 }
 .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
-  line-height: 20px;
+  line-height: 24px;
   display: inline-flex;
 }
 .dataviews-view-list .dataviews-view-list__item-actions {
@@ -817,10 +801,10 @@
   border-radius: 16px;
   border: 1px solid transparent;
   cursor: pointer;
-  padding: 0 12px;
-  height: 32px;
+  padding: 4px 12px;
+  min-height: 32px;
   background: #f0f0f0;
-  color: #757575;
+  color: #2f2f2f;
   position: relative;
   display: flex;
   align-items: center;
@@ -1656,70 +1640,6 @@
   z-index: 1;
 }
 
-.edit-site-page-pages__featured-image {
-  height: 100%;
-  object-fit: cover;
-  width: 100%;
-}
-
-.edit-site-page-pages__featured-image-wrapper {
-  height: 100%;
-  width: 100%;
-  border-radius: 4px;
-}
-.edit-site-page-pages__featured-image-wrapper.is-layout-table:not(:has(.page-pages-preview-field__button)), .edit-site-page-pages__featured-image-wrapper.is-layout-table .page-pages-preview-field__button {
-  width: 32px;
-  height: 32px;
-  display: block;
-  border-radius: 4px;
-  position: relative;
-  overflow: hidden;
-  background-color: #f0f0f0;
-  flex-grow: 0 !important;
-}
-.edit-site-page-pages__featured-image-wrapper.is-layout-table:not(:has(.page-pages-preview-field__button))::after, .edit-site-page-pages__featured-image-wrapper.is-layout-table .page-pages-preview-field__button::after {
-  border-radius: 4px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  content: "";
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-.page-pages-preview-field__button {
-  box-shadow: none;
-  border: none;
-  padding: 0;
-  background-color: unset;
-  box-sizing: border-box;
-  cursor: pointer;
-  overflow: hidden;
-  height: 100%;
-  width: 100%;
-  border-radius: 3px 3px 0 0;
-}
-.page-pages-preview-field__button:focus-visible {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-
-.edit-site-page-pages-title span {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.edit-site-page-pages__title-badge {
-  background: #f0f0f0;
-  color: #757575;
-  padding: 0 4px;
-  border-radius: 2px;
-  font-size: 12px;
-  font-weight: 400;
-  flex-shrink: 0;
-}
-
 .edit-site-patterns__section-header .screen-reader-shortcut:focus {
   top: 0;
 }
@@ -1748,10 +1668,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-radius: 3px 3px 0 0;
-}
-.edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-grid .block-editor-block-preview__container {
-  border-radius: 3px 3px 0 0;
 }
 .edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-table {
   width: 96px;
@@ -1770,7 +1686,7 @@
   cursor: pointer;
   overflow: hidden;
   height: 100%;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px;
 }
 .edit-site-page-patterns-dataviews .page-patterns-preview-field .page-patterns-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1867,7 +1783,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-radius: 3px 3px 0 0;
 }
 .page-templates-preview-field .page-templates-preview-field__button {
   box-shadow: none;
@@ -1878,7 +1793,7 @@
   cursor: pointer;
   overflow: hidden;
   height: 100%;
-  border-radius: 3px;
+  border-radius: 4px;
 }
 .page-templates-preview-field .page-templates-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1890,9 +1805,6 @@
 .page-templates-preview-field.is-viewtype-grid .block-editor-block-preview__container {
   height: 100%;
 }
-.page-templates-preview-field.is-viewtype-grid .page-templates-preview-field__button {
-  border-radius: 3px 3px 0 0;
-}
 .page-templates-preview-field.is-viewtype-table {
   border-radius: 2px;
   position: relative;
@@ -1967,47 +1879,6 @@
   }
 }
 
-.edit-site-table-wrapper {
-  width: 100%;
-  padding: 32px;
-}
-
-.edit-site-table {
-  width: 100%;
-  text-indent: 0;
-  border-color: inherit;
-  border-collapse: collapse;
-  position: relative;
-}
-.edit-site-table a {
-  text-decoration: none;
-}
-.edit-site-table th {
-  text-align: left;
-  font-weight: normal;
-  padding: 0 16px 16px;
-  color: #757575;
-}
-.edit-site-table td {
-  padding: 16px;
-}
-.edit-site-table td,
-.edit-site-table th {
-  vertical-align: center;
-}
-.edit-site-table td:first-child,
-.edit-site-table th:first-child {
-  padding-left: 0;
-}
-.edit-site-table td:last-child,
-.edit-site-table th:last-child {
-  padding-right: 0;
-  text-align: right;
-}
-.edit-site-table tr {
-  border-bottom: 1px solid #f0f0f0;
-}
-
 .edit-site-editor__editor-interface {
   opacity: 1;
   transition: opacity 0.1s ease-out;
@@ -2128,6 +1999,17 @@
   position: relative;
   width: 100%;
   z-index: 2;
+  /*
+   * The SiteHubMobile component is displayed
+   * for pages that do not have a sidebar,
+   * yet it needs the Sidebar component for the React context.
+   *
+   * This removes the padding in this scenario.
+   * See https://github.com/WordPress/gutenberg/pull/63118
+   */
+}
+.edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
+  padding: 0;
 }
 
 .edit-site-layout__canvas-container {
@@ -2331,9 +2213,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar__content {
   flex-grow: 1;
   overflow-y: auto;
+  overflow-x: hidden;
+  contain: content;
 }
 
-@keyframes _fcnwm_slide-from-right {
+@keyframes _ld46o_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2343,7 +2227,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _fcnwm_slide-from-left {
+@keyframes _ld46o_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2399,10 +2283,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _fcnwm_slide-from-left;
+  animation-name: _ld46o_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _fcnwm_slide-from-right;
+  animation-name: _ld46o_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2860,6 +2744,82 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   background: #fff;
 }
 
+.posts-list-page__featured-image {
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.posts-list-page__featured-image-wrapper {
+  height: 100%;
+  width: 100%;
+  border-radius: 4px;
+}
+.posts-list-page__featured-image-wrapper.is-layout-table:not(:has(.posts-list-page-preview-field__button)), .posts-list-page__featured-image-wrapper.is-layout-table .posts-list-page-preview-field__button {
+  width: 32px;
+  height: 32px;
+  display: block;
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  background-color: #f0f0f0;
+  flex-grow: 0 !important;
+}
+.posts-list-page__featured-image-wrapper.is-layout-table:not(:has(.posts-list-page-preview-field__button))::after, .posts-list-page__featured-image-wrapper.is-layout-table .posts-list-page-preview-field__button::after {
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.posts-list-page-preview-field__button {
+  box-shadow: none;
+  border: none;
+  padding: 0;
+  background-color: unset;
+  box-sizing: border-box;
+  cursor: pointer;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  border-radius: 4px;
+}
+.posts-list-page-preview-field__button:focus-visible {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+
+.dataviews-view-grid__card.is-selected .posts-list-page-preview-field__button::after {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+}
+
+.posts-list-page-title span {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.posts-list-page-title-badge {
+  background: #f0f0f0;
+  color: #757575;
+  padding: 0 4px;
+  border-radius: 2px;
+  font-size: 12px;
+  font-weight: 400;
+  flex-shrink: 0;
+}
+
+.posts-list-page-post-author-field__icon-container {
+  height: 24px;
+}
+.posts-list-page-post-author-field__icon-container svg {
+  fill: currentColor;
+}
+
 .edit-site-resizable-frame__inner {
   position: relative;
 }
@@ -2958,7 +2918,8 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   justify-content: center;
   padding-top: 120px;
 }
-.font-library-modal__tabpanel-layout .font-library-modal__tabpanel-layout__footer {
+
+.font-library-modal__footer {
   border-top: 1px solid #ddd;
   margin: 0 -32px -32px;
   padding: 16px 32px;
@@ -2969,6 +2930,13 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   background-color: #fff;
 }
 
+.font-library-modal__page-selection {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #1e1e1e;
+}
+
 .font-library-modal__tabpanel-layout .components-base-control__field {
   margin-bottom: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.2.0",
+	"version": "6.3.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,45 +29,45 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.2.0",
-		"@wordpress/api-fetch": "^7.2.0",
-		"@wordpress/blob": "^4.2.0",
-		"@wordpress/block-editor": "^13.2.0",
-		"@wordpress/block-library": "^9.2.0",
-		"@wordpress/blocks": "^13.2.0",
-		"@wordpress/commands": "^1.2.0",
-		"@wordpress/components": "^28.2.0",
-		"@wordpress/compose": "^7.2.0",
-		"@wordpress/core-commands": "^1.2.0",
-		"@wordpress/core-data": "^7.2.0",
-		"@wordpress/data": "^10.2.0",
-		"@wordpress/dataviews": "^2.2.0",
-		"@wordpress/date": "^5.2.0",
-		"@wordpress/deprecated": "^4.2.0",
-		"@wordpress/dom": "^4.2.0",
-		"@wordpress/editor": "^14.2.0",
-		"@wordpress/element": "^6.2.0",
-		"@wordpress/escape-html": "^3.2.0",
-		"@wordpress/hooks": "^4.2.0",
-		"@wordpress/html-entities": "^4.2.0",
-		"@wordpress/i18n": "^5.2.0",
-		"@wordpress/icons": "^10.2.0",
-		"@wordpress/keyboard-shortcuts": "^5.2.0",
-		"@wordpress/keycodes": "^4.2.0",
-		"@wordpress/notices": "^5.2.0",
-		"@wordpress/patterns": "^2.2.0",
-		"@wordpress/plugins": "^7.2.0",
-		"@wordpress/preferences": "^4.2.0",
-		"@wordpress/primitives": "^4.2.0",
-		"@wordpress/priority-queue": "^3.2.0",
-		"@wordpress/private-apis": "^1.2.0",
-		"@wordpress/reusable-blocks": "^5.2.0",
-		"@wordpress/router": "^1.2.0",
-		"@wordpress/style-engine": "^2.2.0",
-		"@wordpress/url": "^4.2.0",
-		"@wordpress/viewport": "^6.2.0",
-		"@wordpress/widgets": "^4.2.0",
-		"@wordpress/wordcount": "^4.2.0",
+		"@wordpress/a11y": "^4.3.0",
+		"@wordpress/api-fetch": "^7.3.0",
+		"@wordpress/blob": "^4.3.0",
+		"@wordpress/block-editor": "^13.3.0",
+		"@wordpress/block-library": "^9.3.0",
+		"@wordpress/blocks": "^13.3.0",
+		"@wordpress/commands": "^1.3.0",
+		"@wordpress/components": "^28.3.0",
+		"@wordpress/compose": "^7.3.0",
+		"@wordpress/core-commands": "^1.3.0",
+		"@wordpress/core-data": "^7.3.0",
+		"@wordpress/data": "^10.3.0",
+		"@wordpress/dataviews": "^3.0.0",
+		"@wordpress/date": "^5.3.0",
+		"@wordpress/deprecated": "^4.3.0",
+		"@wordpress/dom": "^4.3.0",
+		"@wordpress/editor": "^14.3.0",
+		"@wordpress/element": "^6.3.0",
+		"@wordpress/escape-html": "^3.3.0",
+		"@wordpress/hooks": "^4.3.0",
+		"@wordpress/html-entities": "^4.3.0",
+		"@wordpress/i18n": "^5.3.0",
+		"@wordpress/icons": "^10.3.0",
+		"@wordpress/keyboard-shortcuts": "^5.3.0",
+		"@wordpress/keycodes": "^4.3.0",
+		"@wordpress/notices": "^5.3.0",
+		"@wordpress/patterns": "^2.3.0",
+		"@wordpress/plugins": "^7.3.0",
+		"@wordpress/preferences": "^4.3.0",
+		"@wordpress/primitives": "^4.3.0",
+		"@wordpress/priority-queue": "^3.3.0",
+		"@wordpress/private-apis": "^1.3.0",
+		"@wordpress/reusable-blocks": "^5.3.0",
+		"@wordpress/router": "^1.3.0",
+		"@wordpress/style-engine": "^2.3.0",
+		"@wordpress/url": "^4.3.0",
+		"@wordpress/viewport": "^6.3.0",
+		"@wordpress/widgets": "^4.3.0",
+		"@wordpress/wordcount": "^4.3.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "aa5b14bb5bdbb8d8a02914e154c3bc1c2f18ace6"
+	"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
 }

package/src/components/{add-new-page → add-new-post}/index.js

@@ -9,15 +9,19 @@ import {
 	TextControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
 import { serialize, synchronizeBlocksWithTemplate } from '@wordpress/blocks';
 
-export default function AddNewPageModal( { onSave, onClose } ) {
-	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
+export default function AddNewPostModal( { postType, onSave, onClose } ) {
+	const labels = useSelect(
+		( select ) => select( coreStore ).getPostType( postType )?.labels,
+		[ postType ]
+	);
+	const [ isCreatingPost, setIsCreatingPost ] = useState( false );
 	const [ title, setTitle ] = useState( '' );
 
 	const { saveEntityRecord } = useDispatch( coreStore );
@@ -25,29 +29,30 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 		useDispatch( noticesStore );
 	const { resolveSelect } = useRegistry();
 
-	async function createPage( event ) {
+	async function createPost( event ) {
 		event.preventDefault();
 
-		if ( isCreatingPage ) {
+		if ( isCreatingPost ) {
 			return;
 		}
-		setIsCreatingPage( true );
+		setIsCreatingPost( true );
 		try {
-			const pagePostType =
-				await resolveSelect( coreStore ).getPostType( 'page' );
+			const postTypeObject =
+				await resolveSelect( coreStore ).getPostType( postType );
 			const newPage = await saveEntityRecord(
 				'postType',
-				'page',
+				postType,
 				{
 					status: 'draft',
 					title,
 					slug: title || __( 'No title' ),
 					content:
-						!! pagePostType.template && pagePostType.template.length
+						!! postTypeObject.template &&
+						postTypeObject.template.length
 							? serialize(
 									synchronizeBlocksWithTemplate(
 										[],
-										pagePostType.template
+										postTypeObject.template
 									)
 							  )
 							: undefined,
@@ -59,40 +64,41 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 
 			createSuccessNotice(
 				sprintf(
-					// translators: %s: Title of the created template e.g: "Category".
+					// translators: %s: Title of the created post e.g: "Hello world".
 					__( '"%s" successfully created.' ),
 					decodeEntities( newPage.title?.rendered || title )
 				),
-				{
-					type: 'snackbar',
-				}
+				{ type: 'snackbar' }
 			);
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while creating the page.' );
+					: __( 'An error occurred while creating the item.' );
 
 			createErrorNotice( errorMessage, {
 				type: 'snackbar',
 			} );
 		} finally {
-			setIsCreatingPage( false );
+			setIsCreatingPost( false );
 		}
 	}
 
 	return (
 		<Modal
-			title={ __( 'Draft a new page' ) }
+			title={
+				// translators: %s: post type singular_name label e.g: "Page".
+				sprintf( __( 'Draft new: %s' ), labels?.singular_name )
+			}
 			onRequestClose={ onClose }
 			focusOnMount="firstContentElement"
 			size="small"
 		>
-			<form onSubmit={ createPage }>
+			<form onSubmit={ createPost }>
 				<VStack spacing={ 3 }>
 					<TextControl
 						__next40pxDefaultSize
-						label={ __( 'Page title' ) }
+						label={ __( 'Title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }
 						value={ title }
@@ -109,8 +115,8 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 							__next40pxDefaultSize
 							variant="primary"
 							type="submit"
-							isBusy={ isCreatingPage }
-							aria-disabled={ isCreatingPage }
+							isBusy={ isCreatingPost }
+							aria-disabled={ isCreatingPost }
 						>
 							{ __( 'Create draft' ) }
 						</Button>