@wordpress/edit-post 6.19.0 → 7.1.0

package/src/components/preferences-modal/meta-boxes-section.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -23,8 +23,7 @@ export function MetaBoxesSection( {
 	...sectionProps
 } ) {
 	// The 'Custom Fields' meta box is a special case that we handle separately.
-	const thirdPartyMetaBoxes = filter(
-		metaBoxes,
+	const thirdPartyMetaBoxes = metaBoxes.filter(
 		( { id } ) => id !== 'postcustom'
 	);
 

package/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap

@@ -41,6 +41,17 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <div>
   <div
     class="interface-preferences-modal__option"
@@ -72,7 +83,9 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-3"
           />
         </div>
@@ -134,6 +147,17 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <div>
   <div
     class="interface-preferences-modal__option"
@@ -166,7 +190,9 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-0"
           />
         </div>
@@ -217,6 +243,17 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <div>
   <div
     class="interface-preferences-modal__option"
@@ -249,7 +286,9 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-2"
           />
         </div>
@@ -311,6 +350,17 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <div>
   <div
     class="interface-preferences-modal__option"
@@ -342,7 +392,9 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-1"
           />
         </div>

package/src/components/preferences-modal/options/test/enable-custom-fields.js

@@ -12,6 +12,8 @@ import {
 	CustomFieldsConfirmation,
 } from '../enable-custom-fields';
 
+jest.useFakeTimers();
+
 describe( 'EnableCustomFieldsOption', () => {
 	it( 'renders a checked checkbox when custom fields are enabled', () => {
 		const { container } = render(

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -42,6 +42,17 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 .emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-8 {
   margin-top: calc(4px * 2);
   margin-bottom: 0;
   font-size: 12px;
@@ -186,7 +197,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-0"
                   >
                     Include pre-publish checklist
@@ -194,7 +207,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-0__help"
               >
                 Review settings, such as visibility and tags.
@@ -250,7 +263,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-1"
                   >
                     Distraction free
@@ -258,7 +273,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-1__help"
               >
                 Reduce visual distractions by hiding the toolbar and other elements to focus on writing.
@@ -296,7 +311,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-2"
                   >
                     Spotlight mode
@@ -304,7 +321,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-2__help"
               >
                 Highlights the current block and fades other content.
@@ -342,7 +359,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-3"
                   >
                     Show button text labels
@@ -350,7 +369,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-3__help"
               >
                 Show text instead of icons on buttons.
@@ -388,7 +407,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-4"
                   >
                     Always open list view
@@ -396,7 +417,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-4__help"
               >
                 Opens the block list view sidebar by default.
@@ -434,7 +455,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-5"
                   >
                     Use theme styles
@@ -442,7 +465,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-5__help"
               >
                 Make the editor look like your theme.
@@ -480,7 +503,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-6"
                   >
                     Display block breadcrumbs
@@ -488,7 +513,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-6__help"
               >
                 Shows block breadcrumbs at the bottom of the editor.

package/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap

@@ -41,6 +41,17 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <fieldset
   class="interface-preferences-modal__section"
 >
@@ -83,7 +94,9 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-0"
           >
             Custom fields
@@ -136,6 +149,17 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <fieldset
   class="interface-preferences-modal__section"
 >
@@ -178,7 +202,9 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-3"
           >
             Custom fields
@@ -218,7 +244,9 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-4"
           >
             Meta Box 1
@@ -258,7 +286,9 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-5"
           >
             Meta Box 2
@@ -311,6 +341,17 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <fieldset
   class="interface-preferences-modal__section"
 >
@@ -354,7 +395,9 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-1"
           >
             Meta Box 1
@@ -394,7 +437,9 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-2"
           >
             Meta Box 2

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

@@ -65,18 +65,6 @@ export default function ListViewOutline() {
 	}, [] );
 	return (
 		<>
-			{ headingCount > 0 ? (
-				<DocumentOutline />
-			) : (
-				<div className="edit-post-editor__list-view-empty-headings">
-					<EmptyOutlineIllustration />
-					<p>
-						{ __(
-							'Navigate the structure of your document and address issues like empty or incorrect heading levels.'
-						) }
-					</p>
-				</div>
-			) }
 			<div className="edit-post-editor__list-view-overview">
 				<div>
 					<Text>{ __( 'Characters:' ) }</Text>
@@ -93,6 +81,18 @@ export default function ListViewOutline() {
 					<TimeToRead />
 				</div>
 			</div>
+			{ headingCount > 0 ? (
+				<DocumentOutline />
+			) : (
+				<div className="edit-post-editor__list-view-empty-headings">
+					<EmptyOutlineIllustration />
+					<p>
+						{ __(
+							'Navigate the structure of your document and address issues like empty or incorrect heading levels.'
+						) }
+					</p>
+				</div>
+			) }
 		</>
 	);
 }

package/src/components/secondary-sidebar/style.scss

@@ -76,24 +76,23 @@
 }
 
 .edit-post-editor__list-view-overview {
+	display: flex;
+	flex-direction: column;
+	gap: $grid-unit-10;
+	border-bottom: $border-width solid $gray-300;
+	padding: $grid-unit-20;
+
 	& > div > span:first-child {
 		// Width of the text information fields.
 		width: 90px;
 		display: inline-block;
 	}
-	border-top: $border-width solid $gray-300;
-	width: calc(100% - #{ $grid-unit-40 });
-	padding: $grid-unit-20;
-	& > div {
-		padding: 0 0 $grid-unit-10;
-		& > span {
-			font-size: $helptext-font-size;
-			line-height: $default-line-height;
-			color: $gray-700;
-		}
+
+	& > div > span {
+		font-size: $helptext-font-size;
+		line-height: $default-line-height;
+		color: $gray-700;
 	}
-	// Height of the overview container.
-	height: 72px;
 }
 
 .edit-post-editor__list-view-container {

package/src/components/sidebar/post-schedule/style.scss

@@ -7,13 +7,14 @@
 		display: block;
 		width: 45%;
 		flex-shrink: 0;
+		// Match padding on tertiary buttons for alignment.
+		padding: $grid-unit-15 * 0.5 0;
 	}
 }
 
 .components-button.edit-post-post-schedule__toggle {
 	text-align: left;
 	white-space: normal;
-	height: auto;
 
 	// This span is added by the Popover in Tooltip when no anchor is
 	// provided. We set its width to 0 so that it does not cause the button text

package/src/components/sidebar/post-status/index.js

@@ -40,8 +40,8 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 					<>
 						<PostVisibility />
 						<PostSchedule />
-						<PostURL />
 						<PostTemplate />
+						<PostURL />
 						<PostSticky />
 						<PostPendingStatus />
 						<PostFormat />

package/src/components/sidebar/post-template/index.js

@@ -85,9 +85,14 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 		if ( ! supportsTemplateMode && availableTemplates[ templateSlug ] ) {
 			return availableTemplates[ templateSlug ];
 		}
-
-		const template = select( editPostStore ).getEditedPostTemplate();
-		return template?.title ?? template?.slug;
+		const template =
+			select( coreStore ).canUser( 'create', 'templates' ) &&
+			select( editPostStore ).getEditedPostTemplate();
+		return (
+			template?.title ||
+			template?.slug ||
+			availableTemplates?.[ templateSlug ]
+		);
 	}, [] );
 
 	return (

package/src/components/sidebar/post-template/style.scss

@@ -5,6 +5,8 @@
 	span {
 		display: block;
 		width: 45%;
+		// Match padding on tertiary buttons for alignment.
+		padding: $grid-unit-15 * 0.5 0;
 	}
 }
 

package/src/components/sidebar/post-url/style.scss

@@ -1,11 +1,14 @@
 .edit-post-post-url {
 	width: 100%;
 	justify-content: flex-start;
+	align-items: flex-start;
 
 	span {
 		display: block;
 		width: 45%;
 		flex-shrink: 0;
+		// Match padding on tertiary buttons for alignment.
+		padding: $grid-unit-15 * 0.5 0;
 	}
 }
 

package/src/components/sidebar/post-visibility/style.scss

@@ -5,6 +5,8 @@
 	span {
 		display: block;
 		width: 45%;
+		// Match padding on tertiary buttons for alignment.
+		padding: $grid-unit-15 * 0.5 0;
 	}
 }
 

package/src/components/sidebar/settings-header/style.scss

@@ -1,53 +1,66 @@
+// This tab style CSS is duplicated verbatim in
+// /packages/components/src/tab-panel/style.scss
 .components-button.edit-post-sidebar__panel-tab {
+	position: relative;
 	border-radius: 0;
 	height: $grid-unit-60;
 	background: transparent;
 	border: none;
 	box-shadow: none;
 	cursor: pointer;
-	display: inline-block;
-	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
+	padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 500;
 
-	// This pseudo-element "duplicates" the tab label and sets the text to bold.
-	// This ensures that the tab doesn't change width when selected.
-	// See: https://github.com/WordPress/gutenberg/pull/9793
+	&:focus:not(:disabled) {
+		position: relative;
+		box-shadow: none;
+	}
+
+	// Tab indicator
 	&::after {
-		content: attr(data-label);
-		display: block;
-		font-weight: 600;
-		height: 0;
-		overflow: hidden;
-		speak: none;
-		visibility: hidden;
+		content: "";
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		pointer-events: none;
+
+		// Draw the indicator.
+		background: var(--wp-admin-theme-color);
+		height: calc(0 * var(--wp-admin-border-width-focus));
+		border-radius: 0;
+
+		// Animation
+		transition: all 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
-	&.is-active {
-		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
-		position: relative;
-		z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
-
-		// This border appears in Windows High Contrast mode instead of the box-shadow.
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			bottom: 1px;
-			right: 0;
-			left: 0;
-			border-bottom: $border-width-tab solid transparent;
-		}
+	// Active.
+	&.is-active::after {
+		height: calc(1 * var(--wp-admin-border-width-focus));
 	}
 
-	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		position: relative;
-		z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
+	// Focus.
+	&::before {
+		content: "";
+		position: absolute;
+		top: $grid-unit-15;
+		right: $grid-unit-15;
+		bottom: $grid-unit-15;
+		left: $grid-unit-15;
+		pointer-events: none;
+
+		// Draw the indicator.
+		box-shadow: 0 0 0 0 transparent;
+		border-radius: $radius-block-ui;
+
+		// Animation
+		transition: all 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
-	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -#{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
+	&:focus-visible::before {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 	}
 }