@wordpress/edit-post 6.19.0 → 7.0.0

package/build-style/style.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -82,6 +94,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
@@ -308,6 +322,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .interface-interface-skeleton__content .interface-navigable-region__stacker {
   flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .interface-interface-skeleton__secondary-sidebar,
@@ -343,6 +359,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
+.interface-interface-skeleton__secondary-sidebar .interface-navigable-region__stacker {
+  height: 100%;
+}
 @media (min-width: 782px) {
   .interface-interface-skeleton__secondary-sidebar {
     border-right: 1px solid #e0e0e0;
@@ -400,12 +419,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
 }
 
-@media (min-width: 782px) {
-  .interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
-    height: calc(100% - 25px);
-  }
-}
-
 .interface-more-menu-dropdown {
   margin-left: -4px;
 }
@@ -829,7 +842,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   width: 36px;
   height: 36px;
   border-radius: 2px;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   margin-top: -1px;
 }
 
@@ -1521,12 +1535,12 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   display: block;
   width: 45%;
   flex-shrink: 0;
+  padding: 6px 0;
 }
 
 .components-button.edit-post-post-schedule__toggle {
   text-align: left;
   white-space: normal;
-  height: auto;
 }
 .components-button.edit-post-post-schedule__toggle span {
   width: 0;
@@ -1555,6 +1569,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-post-template span {
   display: block;
   width: 45%;
+  padding: 6px 0;
 }
 
 .edit-post-post-template__dropdown {
@@ -1586,11 +1601,13 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-post-url {
   width: 100%;
   justify-content: flex-start;
+  align-items: flex-start;
 }
 .edit-post-post-url span {
   display: block;
   width: 45%;
   flex-shrink: 0;
+  padding: 6px 0;
 }
 
 .components-button.edit-post-post-url__toggle {
@@ -1612,6 +1629,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-post-visibility span {
   display: block;
   width: 45%;
+  padding: 6px 0;
 }
 
 .edit-post-post-visibility__dialog .editor-post-visibility {
@@ -1620,47 +1638,62 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .components-button.edit-post-sidebar__panel-tab {
+  position: relative;
   border-radius: 0;
   height: 48px;
   background: transparent;
   border: none;
   box-shadow: none;
   cursor: pointer;
-  display: inline-block;
-  padding: 3px 15px;
+  padding: 3px 16px;
   margin-left: 0;
   font-weight: 500;
 }
-.components-button.edit-post-sidebar__panel-tab::after {
-  content: attr(data-label);
-  display: block;
-  font-weight: 600;
-  height: 0;
-  overflow: hidden;
-  speak: none;
-  visibility: hidden;
-}
-.components-button.edit-post-sidebar__panel-tab.is-active {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
+.components-button.edit-post-sidebar__panel-tab:focus:not(:disabled) {
   position: relative;
-  z-index: 1;
+  box-shadow: none;
 }
-.components-button.edit-post-sidebar__panel-tab.is-active::before {
+.components-button.edit-post-sidebar__panel-tab::after {
   content: "";
   position: absolute;
-  top: 0;
-  bottom: 1px;
   right: 0;
+  bottom: 0;
   left: 0;
-  border-bottom: 1.5px solid transparent;
+  pointer-events: none;
+  background: var(--wp-admin-theme-color);
+  height: calc(0 * var(--wp-admin-border-width-focus));
+  border-radius: 0;
+  transition: all 0.1s linear;
 }
-.components-button.edit-post-sidebar__panel-tab:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  position: relative;
-  z-index: 1;
+@media (prefers-reduced-motion: reduce) {
+  .components-button.edit-post-sidebar__panel-tab::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.components-button.edit-post-sidebar__panel-tab.is-active::after {
+  height: calc(1 * var(--wp-admin-border-width-focus));
+}
+.components-button.edit-post-sidebar__panel-tab::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  bottom: 12px;
+  left: 12px;
+  pointer-events: none;
+  box-shadow: 0 0 0 0 transparent;
+  border-radius: 2px;
+  transition: all 0.1s linear;
 }
-.components-button.edit-post-sidebar__panel-tab.is-active:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -3px 0 0 var(--wp-admin-theme-color);
+@media (prefers-reduced-motion: reduce) {
+  .components-button.edit-post-sidebar__panel-tab::before {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.components-button.edit-post-sidebar__panel-tab:focus-visible::before {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 
 h2.edit-post-template-summary__title {
@@ -1795,7 +1828,8 @@ h2.edit-post-template-summary__title {
 .edit-template-welcome-guide__image > img {
   display: block;
   max-width: 100%;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .edit-post-welcome-guide__heading,
 .edit-template-welcome-guide__heading {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.19.0",
+	"version": "7.0.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,42 +27,42 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.22.0",
-		"@wordpress/api-fetch": "^6.19.0",
-		"@wordpress/block-editor": "^10.5.0",
-		"@wordpress/block-library": "^7.19.0",
-		"@wordpress/blocks": "^11.21.0",
-		"@wordpress/components": "^22.1.0",
-		"@wordpress/compose": "^5.20.0",
-		"@wordpress/core-data": "^5.5.0",
-		"@wordpress/data": "^7.6.0",
-		"@wordpress/deprecated": "^3.22.0",
-		"@wordpress/editor": "^12.21.0",
-		"@wordpress/element": "^4.20.0",
-		"@wordpress/hooks": "^3.22.0",
-		"@wordpress/i18n": "^4.22.0",
-		"@wordpress/icons": "^9.13.0",
-		"@wordpress/interface": "^4.21.0",
-		"@wordpress/keyboard-shortcuts": "^3.20.0",
-		"@wordpress/keycodes": "^3.22.0",
-		"@wordpress/media-utils": "^4.13.0",
-		"@wordpress/notices": "^3.22.0",
-		"@wordpress/plugins": "^4.20.0",
-		"@wordpress/preferences": "^2.14.0",
-		"@wordpress/url": "^3.23.0",
-		"@wordpress/viewport": "^4.20.0",
-		"@wordpress/warning": "^2.22.0",
+		"@wordpress/a11y": "^3.23.0",
+		"@wordpress/api-fetch": "^6.20.0",
+		"@wordpress/block-editor": "^11.0.0",
+		"@wordpress/block-library": "^8.0.0",
+		"@wordpress/blocks": "^12.0.0",
+		"@wordpress/components": "^23.0.0",
+		"@wordpress/compose": "^6.0.0",
+		"@wordpress/core-data": "^6.0.0",
+		"@wordpress/data": "^8.0.0",
+		"@wordpress/deprecated": "^3.23.0",
+		"@wordpress/editor": "^13.0.0",
+		"@wordpress/element": "^5.0.0",
+		"@wordpress/hooks": "^3.23.0",
+		"@wordpress/i18n": "^4.23.0",
+		"@wordpress/icons": "^9.14.0",
+		"@wordpress/interface": "^5.0.0",
+		"@wordpress/keyboard-shortcuts": "^4.0.0",
+		"@wordpress/keycodes": "^3.23.0",
+		"@wordpress/media-utils": "^4.14.0",
+		"@wordpress/notices": "^3.23.0",
+		"@wordpress/plugins": "^5.0.0",
+		"@wordpress/preferences": "^3.0.0",
+		"@wordpress/url": "^3.24.0",
+		"@wordpress/viewport": "^5.0.0",
+		"@wordpress/warning": "^2.23.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"rememo": "^4.0.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
+	"gitHead": "1eb65aabe6738097f4c062e78f69ae8f05879848"
 }

package/src/components/block-manager/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -71,6 +66,7 @@ function BlockManager( {
 				</div>
 			) }
 			<SearchControl
+				__nextHasNoMarginBottom
 				label={ __( 'Search for a block' ) }
 				placeholder={ __( 'Search for a block' ) }
 				value={ search }
@@ -92,15 +88,15 @@ function BlockManager( {
 					<BlockManagerCategory
 						key={ category.slug }
 						title={ category.title }
-						blockTypes={ filter( blockTypes, {
-							category: category.slug,
-						} ) }
+						blockTypes={ blockTypes.filter(
+							( blockType ) =>
+								blockType.category === category.slug
+						) }
 					/>
 				) ) }
 				<BlockManagerCategory
 					title={ __( 'Uncategorized' ) }
-					blockTypes={ filter(
-						blockTypes,
+					blockTypes={ blockTypes.filter(
 						( { category } ) => ! category
 					) }
 				/>

package/src/components/header/index.js

@@ -25,6 +25,7 @@ import { store as editPostStore } from '../../store';
 import TemplateTitle from './template-title';
 
 function Header( { setEntitiesSavedStatesCallback } ) {
+	const isLargeViewport = useViewportMatch( 'large' );
 	const {
 		hasActiveMetaboxes,
 		isPublishSidebarOpened,
@@ -40,13 +41,12 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
 			isDistractionFree:
-				select( editPostStore ).isFeatureActive( 'distractionFree' ),
+				select( editPostStore ).isFeatureActive( 'distractionFree' ) &&
+				isLargeViewport,
 		} ),
 		[]
 	);
 
-	const isLargeViewport = useViewportMatch( 'large' );
-
 	const classes = classnames( 'edit-post-header' );
 
 	const slideY = {

package/src/components/layout/index.js

@@ -66,6 +66,7 @@ const interfaceLabels = {
 function Layout( { styles } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
+	const isLargeViewport = useViewportMatch( 'large' );
 	const { openGeneralSidebar, closeGeneralSidebar, setIsInserterOpened } =
 		useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -116,7 +117,8 @@ function Layout( { styles } ) {
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
 			isDistractionFree:
-				select( editPostStore ).isFeatureActive( 'distractionFree' ),
+				select( editPostStore ).isFeatureActive( 'distractionFree' ) &&
+				isLargeViewport,
 			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
 				'showBlockBreadcrumbs'
 			),

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/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.