@wordpress/edit-post 8.9.0 → 8.10.0

package/build-style/style-rtl.css

@@ -192,65 +192,101 @@
 
 .edit-post-meta-boxes-main {
   filter: drop-shadow(0 -1px rgba(0, 0, 0, 0.133));
+  outline: 1px solid transparent;
   background-color: #fff;
-  clear: both;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
-.edit-post-meta-boxes-main:not(details) {
-  padding-top: 24px;
-}
-.edit-post-meta-boxes-main:is(details) > summary {
-  cursor: pointer;
-  color: #1e1e1e;
-  background-color: #fff;
-  height: 32px;
-  line-height: 32px;
-  font-size: 13px;
-  padding-right: 24px;
-  box-shadow: 0 1px #ddd;
-}
-.edit-post-meta-boxes-main:is(details)[open] > summary {
-  position: sticky;
-  top: 0;
-  z-index: 1;
+.edit-post-meta-boxes-main.is-resizable {
+  padding-block-start: 24px;
 }
 
-.edit-post-meta-boxes-main__resize-handle {
+.edit-post-meta-boxes-main__presenter {
   display: flex;
-  inset: 0 0 auto 0;
-  height: 24px;
   box-shadow: 0 1px #ddd;
+  outline: 1px solid transparent;
+  position: relative;
+  z-index: 1;
 }
-.edit-post-meta-boxes-main__resize-handle > button {
+.is-toggle-only > .edit-post-meta-boxes-main__presenter, .is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter > button {
   appearance: none;
-  cursor: inherit;
-  margin: auto;
   padding: 0;
   border: none;
   outline: none;
-  background-color: #ddd;
+  background-color: transparent;
+}
+.is-toggle-only > .edit-post-meta-boxes-main__presenter {
+  flex-shrink: 0;
+  cursor: pointer;
+  height: 32px;
+  justify-content: space-between;
+  align-items: center;
+  padding-inline: 24px 12px;
+}
+.is-toggle-only > .edit-post-meta-boxes-main__presenter:is(:hover, :focus-visible) {
+  color: var(--wp-admin-theme-color);
+}
+.is-toggle-only > .edit-post-meta-boxes-main__presenter:focus-visible::after {
+  content: "";
+  position: absolute;
+  inset: var(--wp-admin-border-width-focus);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.is-toggle-only > .edit-post-meta-boxes-main__presenter > svg {
+  fill: currentColor;
+}
+.is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter {
+  inset: 0 0 auto;
+}
+.is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter > button {
+  cursor: inherit;
   width: 64px;
+  height: 24px;
+  margin: auto;
+}
+.is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter > button::before {
+  content: "";
+  background-color: #ddd;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  position: absolute;
+  inset-block: calc(50% - 4px / 2) auto;
+  transform: translateX(50%);
+  width: inherit;
   height: 4px;
   border-radius: 2px;
   transition: width 0.3s ease-out;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-post-meta-boxes-main__resize-handle > button {
+  .is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter > button::before {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-.edit-post-meta-boxes-main__resize-handle:hover > button,
-.edit-post-meta-boxes-main__resize-handle > button:focus {
+.is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter:is(:hover, :focus-within) > button::before {
   background-color: var(--wp-admin-theme-color);
   width: 80px;
 }
 
+@media (pointer: coarse) {
+  .is-resizable.edit-post-meta-boxes-main {
+    padding-block-start: 32px;
+  }
+  .is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter > button {
+    height: 32px;
+  }
+}
 .edit-post-meta-boxes-main__liner {
   overflow: auto;
-  max-height: 100%;
   isolation: isolate;
 }
 
+.edit-post-layout__metaboxes {
+  clear: both;
+}
+
 .has-metaboxes .editor-visual-editor {
   flex: 1;
 }

package/build-style/style.css

@@ -192,65 +192,101 @@
 
 .edit-post-meta-boxes-main {
   filter: drop-shadow(0 -1px rgba(0, 0, 0, 0.133));
+  outline: 1px solid transparent;
   background-color: #fff;
-  clear: both;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
-.edit-post-meta-boxes-main:not(details) {
-  padding-top: 24px;
-}
-.edit-post-meta-boxes-main:is(details) > summary {
-  cursor: pointer;
-  color: #1e1e1e;
-  background-color: #fff;
-  height: 32px;
-  line-height: 32px;
-  font-size: 13px;
-  padding-left: 24px;
-  box-shadow: 0 1px #ddd;
-}
-.edit-post-meta-boxes-main:is(details)[open] > summary {
-  position: sticky;
-  top: 0;
-  z-index: 1;
+.edit-post-meta-boxes-main.is-resizable {
+  padding-block-start: 24px;
 }
 
-.edit-post-meta-boxes-main__resize-handle {
+.edit-post-meta-boxes-main__presenter {
   display: flex;
-  inset: 0 0 auto 0;
-  height: 24px;
   box-shadow: 0 1px #ddd;
+  outline: 1px solid transparent;
+  position: relative;
+  z-index: 1;
 }
-.edit-post-meta-boxes-main__resize-handle > button {
+.is-toggle-only > .edit-post-meta-boxes-main__presenter, .is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter > button {
   appearance: none;
-  cursor: inherit;
-  margin: auto;
   padding: 0;
   border: none;
   outline: none;
-  background-color: #ddd;
+  background-color: transparent;
+}
+.is-toggle-only > .edit-post-meta-boxes-main__presenter {
+  flex-shrink: 0;
+  cursor: pointer;
+  height: 32px;
+  justify-content: space-between;
+  align-items: center;
+  padding-inline: 24px 12px;
+}
+.is-toggle-only > .edit-post-meta-boxes-main__presenter:is(:hover, :focus-visible) {
+  color: var(--wp-admin-theme-color);
+}
+.is-toggle-only > .edit-post-meta-boxes-main__presenter:focus-visible::after {
+  content: "";
+  position: absolute;
+  inset: var(--wp-admin-border-width-focus);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.is-toggle-only > .edit-post-meta-boxes-main__presenter > svg {
+  fill: currentColor;
+}
+.is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter {
+  inset: 0 0 auto;
+}
+.is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter > button {
+  cursor: inherit;
   width: 64px;
+  height: 24px;
+  margin: auto;
+}
+.is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter > button::before {
+  content: "";
+  background-color: #ddd;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  position: absolute;
+  inset-block: calc(50% - 4px / 2) auto;
+  transform: translateX(-50%);
+  width: inherit;
   height: 4px;
   border-radius: 2px;
   transition: width 0.3s ease-out;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-post-meta-boxes-main__resize-handle > button {
+  .is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter > button::before {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-.edit-post-meta-boxes-main__resize-handle:hover > button,
-.edit-post-meta-boxes-main__resize-handle > button:focus {
+.is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter:is(:hover, :focus-within) > button::before {
   background-color: var(--wp-admin-theme-color);
   width: 80px;
 }
 
+@media (pointer: coarse) {
+  .is-resizable.edit-post-meta-boxes-main {
+    padding-block-start: 32px;
+  }
+  .is-resizable.edit-post-meta-boxes-main .edit-post-meta-boxes-main__presenter > button {
+    height: 32px;
+  }
+}
 .edit-post-meta-boxes-main__liner {
   overflow: auto;
-  max-height: 100%;
   isolation: isolate;
 }
 
+.edit-post-layout__metaboxes {
+  clear: both;
+}
+
 .has-metaboxes .editor-visual-editor {
   flex: 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "8.9.0",
+	"version": "8.10.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,36 +27,36 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^4.9.0",
-		"@wordpress/api-fetch": "^7.9.0",
-		"@wordpress/block-editor": "^14.4.0",
-		"@wordpress/block-library": "^9.9.0",
-		"@wordpress/blocks": "^13.9.0",
-		"@wordpress/commands": "^1.9.0",
-		"@wordpress/components": "^28.9.0",
-		"@wordpress/compose": "^7.9.0",
-		"@wordpress/core-commands": "^1.9.0",
-		"@wordpress/core-data": "^7.9.0",
-		"@wordpress/data": "^10.9.0",
-		"@wordpress/deprecated": "^4.9.0",
-		"@wordpress/dom": "^4.9.0",
-		"@wordpress/editor": "^14.9.0",
-		"@wordpress/element": "^6.9.0",
-		"@wordpress/hooks": "^4.9.0",
-		"@wordpress/html-entities": "^4.9.0",
-		"@wordpress/i18n": "^5.9.0",
-		"@wordpress/icons": "^10.9.0",
-		"@wordpress/keyboard-shortcuts": "^5.9.0",
-		"@wordpress/keycodes": "^4.9.0",
-		"@wordpress/notices": "^5.9.0",
-		"@wordpress/plugins": "^7.9.0",
-		"@wordpress/preferences": "^4.9.0",
-		"@wordpress/private-apis": "^1.9.0",
-		"@wordpress/url": "^4.9.0",
-		"@wordpress/viewport": "^6.9.0",
-		"@wordpress/warning": "^3.9.0",
-		"@wordpress/widgets": "^4.9.0",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "^4.10.0",
+		"@wordpress/api-fetch": "^7.10.0",
+		"@wordpress/block-editor": "^14.5.0",
+		"@wordpress/block-library": "^9.10.0",
+		"@wordpress/blocks": "^13.10.0",
+		"@wordpress/commands": "^1.10.0",
+		"@wordpress/components": "^28.10.0",
+		"@wordpress/compose": "^7.10.0",
+		"@wordpress/core-commands": "^1.10.0",
+		"@wordpress/core-data": "^7.10.0",
+		"@wordpress/data": "^10.10.0",
+		"@wordpress/deprecated": "^4.10.0",
+		"@wordpress/dom": "^4.10.0",
+		"@wordpress/editor": "^14.10.0",
+		"@wordpress/element": "^6.10.0",
+		"@wordpress/hooks": "^4.10.0",
+		"@wordpress/html-entities": "^4.10.0",
+		"@wordpress/i18n": "^5.10.0",
+		"@wordpress/icons": "^10.10.0",
+		"@wordpress/keyboard-shortcuts": "^5.10.0",
+		"@wordpress/keycodes": "^4.10.0",
+		"@wordpress/notices": "^5.10.0",
+		"@wordpress/plugins": "^7.10.0",
+		"@wordpress/preferences": "^4.10.0",
+		"@wordpress/private-apis": "^1.10.0",
+		"@wordpress/url": "^4.10.0",
+		"@wordpress/viewport": "^6.10.0",
+		"@wordpress/warning": "^3.10.0",
+		"@wordpress/widgets": "^4.10.0",
 		"clsx": "^2.1.1",
 		"memize": "^2.1.0"
 	},
@@ -67,5 +67,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
+	"gitHead": "ab34a7ac935fd1478eac63b596242d83270897ee"
 }

package/src/components/init-pattern-modal/index.js

@@ -27,8 +27,8 @@ export default function InitPatternModal() {
 			isNewPost: isCleanNewPost(),
 		};
 	}, [] );
-	const [ isModalOpen, setIsModalOpen ] = useState( () =>
-		isNewPost && postType === 'wp_block' ? true : false
+	const [ isModalOpen, setIsModalOpen ] = useState(
+		() => isNewPost && postType === 'wp_block'
 	);
 
 	if ( postType !== 'wp_block' || ! isNewPost ) {