@wordpress/edit-post 7.22.0 → 7.23.0

package/build-module/components/start-page-options/index.js

@@ -4,7 +4,7 @@ import { createElement } from "react";
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import { store as blockEditorStore, __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
@@ -58,32 +58,28 @@ function PatternSelection({
     }
   });
 }
-function StartPageOptionsModal() {
-  const [modalState, setModalState] = useState('initial');
+function StartPageOptionsModal({
+  onClose
+}) {
   const startPatterns = useStartPatterns();
   const hasStartPattern = startPatterns.length > 0;
-  const shouldOpenModal = hasStartPattern && modalState === 'initial';
-  useEffect(() => {
-    if (shouldOpenModal) {
-      setModalState('open');
-    }
-  }, [shouldOpenModal]);
-  if (modalState !== 'open') {
+  if (!hasStartPattern) {
     return null;
   }
   return createElement(Modal, {
     className: "edit-post-start-page-options__modal",
     title: __('Choose a pattern'),
     isFullScreen: true,
-    onRequestClose: () => setModalState('closed')
+    onRequestClose: onClose
   }, createElement("div", {
     className: "edit-post-start-page-options__modal-content"
   }, createElement(PatternSelection, {
     blockPatterns: startPatterns,
-    onChoosePattern: () => setModalState('closed')
+    onChoosePattern: onClose
   })));
 }
 export default function StartPageOptions() {
+  const [isClosed, setIsClosed] = useState(false);
   const shouldEnableModal = useSelect(select => {
     const {
       isCleanNewPost
@@ -94,9 +90,11 @@ export default function StartPageOptions() {
     } = select(editPostStore);
     return !isEditingTemplate() && !isFeatureActive('welcomeGuide') && isCleanNewPost();
   }, []);
-  if (!shouldEnableModal) {
+  if (!shouldEnableModal || isClosed) {
     return null;
   }
-  return createElement(StartPageOptionsModal, null);
+  return createElement(StartPageOptionsModal, {
+    onClose: () => setIsClosed(true)
+  });
 }
 //# sourceMappingURL=index.js.map

package/build-module/components/start-page-options/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Modal","__","useState","useEffect","useMemo","store","blockEditorStore","__experimentalBlockPatternsList","BlockPatternsList","useSelect","useDispatch","useAsyncList","editorStore","editPostStore","useStartPatterns","blockPatternsWithPostContentBlockType","postType","select","getPatternsByBlockTypes","getCurrentPostType","filter","pattern","postTypes","Array","isArray","includes","PatternSelection","blockPatterns","onChoosePattern","shownBlockPatterns","resetEditorBlocks","createElement","shownPatterns","onClickPattern","_pattern","blocks","StartPageOptionsModal","modalState","setModalState","startPatterns","hasStartPattern","length","shouldOpenModal","className","title","isFullScreen","onRequestClose","StartPageOptions","shouldEnableModal","isCleanNewPost","isEditingTemplate","isFeatureActive"],"sources":["@wordpress/edit-post/src/components/start-page-options/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport {\n\tstore as blockEditorStore,\n\t__experimentalBlockPatternsList as BlockPatternsList,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useAsyncList } from '@wordpress/compose';\nimport { store as editorStore } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport { store as editPostStore } from '../../store';\n\nfunction useStartPatterns() {\n\t// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,\n\t// and it has no postTypes declared and the current post type is page or if\n\t// the current post type is part of the postTypes declared.\n\tconst { blockPatternsWithPostContentBlockType, postType } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getPatternsByBlockTypes } = select( blockEditorStore );\n\t\t\tconst { getCurrentPostType } = select( editorStore );\n\t\t\treturn {\n\t\t\t\tblockPatternsWithPostContentBlockType:\n\t\t\t\t\tgetPatternsByBlockTypes( 'core/post-content' ),\n\t\t\t\tpostType: getCurrentPostType(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\treturn useMemo( () => {\n\t\t// filter patterns without postTypes declared if the current postType is page\n\t\t// or patterns that declare the current postType in its post type array.\n\t\treturn blockPatternsWithPostContentBlockType.filter( ( pattern ) => {\n\t\t\treturn (\n\t\t\t\t( postType === 'page' && ! pattern.postTypes ) ||\n\t\t\t\t( Array.isArray( pattern.postTypes ) &&\n\t\t\t\t\tpattern.postTypes.includes( postType ) )\n\t\t\t);\n\t\t} );\n\t}, [ postType, blockPatternsWithPostContentBlockType ] );\n}\n\nfunction PatternSelection( { blockPatterns, onChoosePattern } ) {\n\tconst shownBlockPatterns = useAsyncList( blockPatterns );\n\tconst { resetEditorBlocks } = useDispatch( editorStore );\n\treturn (\n\t\t<BlockPatternsList\n\t\t\tblockPatterns={ blockPatterns }\n\t\t\tshownPatterns={ shownBlockPatterns }\n\t\t\tonClickPattern={ ( _pattern, blocks ) => {\n\t\t\t\tresetEditorBlocks( blocks );\n\t\t\t\tonChoosePattern();\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction StartPageOptionsModal() {\n\tconst [ modalState, setModalState ] = useState( 'initial' );\n\tconst startPatterns = useStartPatterns();\n\tconst hasStartPattern = startPatterns.length > 0;\n\tconst shouldOpenModal = hasStartPattern && modalState === 'initial';\n\n\tuseEffect( () => {\n\t\tif ( shouldOpenModal ) {\n\t\t\tsetModalState( 'open' );\n\t\t}\n\t}, [ shouldOpenModal ] );\n\n\tif ( modalState !== 'open' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"edit-post-start-page-options__modal\"\n\t\t\ttitle={ __( 'Choose a pattern' ) }\n\t\t\tisFullScreen\n\t\t\tonRequestClose={ () => setModalState( 'closed' ) }\n\t\t>\n\t\t\t<div className=\"edit-post-start-page-options__modal-content\">\n\t\t\t\t<PatternSelection\n\t\t\t\t\tblockPatterns={ startPatterns }\n\t\t\t\t\tonChoosePattern={ () => setModalState( 'closed' ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default function StartPageOptions() {\n\tconst shouldEnableModal = useSelect( ( select ) => {\n\t\tconst { isCleanNewPost } = select( editorStore );\n\t\tconst { isEditingTemplate, isFeatureActive } = select( editPostStore );\n\n\t\treturn (\n\t\t\t! isEditingTemplate() &&\n\t\t\t! isFeatureActive( 'welcomeGuide' ) &&\n\t\t\tisCleanNewPost()\n\t\t);\n\t}, [] );\n\n\tif ( ! shouldEnableModal ) {\n\t\treturn null;\n\t}\n\n\treturn <StartPageOptionsModal />;\n}\n"],"mappings":"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"}
+{"version":3,"names":["Modal","__","useState","useMemo","store","blockEditorStore","__experimentalBlockPatternsList","BlockPatternsList","useSelect","useDispatch","useAsyncList","editorStore","editPostStore","useStartPatterns","blockPatternsWithPostContentBlockType","postType","select","getPatternsByBlockTypes","getCurrentPostType","filter","pattern","postTypes","Array","isArray","includes","PatternSelection","blockPatterns","onChoosePattern","shownBlockPatterns","resetEditorBlocks","createElement","shownPatterns","onClickPattern","_pattern","blocks","StartPageOptionsModal","onClose","startPatterns","hasStartPattern","length","className","title","isFullScreen","onRequestClose","StartPageOptions","isClosed","setIsClosed","shouldEnableModal","isCleanNewPost","isEditingTemplate","isFeatureActive"],"sources":["@wordpress/edit-post/src/components/start-page-options/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState, useMemo } from '@wordpress/element';\nimport {\n\tstore as blockEditorStore,\n\t__experimentalBlockPatternsList as BlockPatternsList,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useAsyncList } from '@wordpress/compose';\nimport { store as editorStore } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport { store as editPostStore } from '../../store';\n\nfunction useStartPatterns() {\n\t// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,\n\t// and it has no postTypes declared and the current post type is page or if\n\t// the current post type is part of the postTypes declared.\n\tconst { blockPatternsWithPostContentBlockType, postType } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getPatternsByBlockTypes } = select( blockEditorStore );\n\t\t\tconst { getCurrentPostType } = select( editorStore );\n\t\t\treturn {\n\t\t\t\tblockPatternsWithPostContentBlockType:\n\t\t\t\t\tgetPatternsByBlockTypes( 'core/post-content' ),\n\t\t\t\tpostType: getCurrentPostType(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\treturn useMemo( () => {\n\t\t// filter patterns without postTypes declared if the current postType is page\n\t\t// or patterns that declare the current postType in its post type array.\n\t\treturn blockPatternsWithPostContentBlockType.filter( ( pattern ) => {\n\t\t\treturn (\n\t\t\t\t( postType === 'page' && ! pattern.postTypes ) ||\n\t\t\t\t( Array.isArray( pattern.postTypes ) &&\n\t\t\t\t\tpattern.postTypes.includes( postType ) )\n\t\t\t);\n\t\t} );\n\t}, [ postType, blockPatternsWithPostContentBlockType ] );\n}\n\nfunction PatternSelection( { blockPatterns, onChoosePattern } ) {\n\tconst shownBlockPatterns = useAsyncList( blockPatterns );\n\tconst { resetEditorBlocks } = useDispatch( editorStore );\n\treturn (\n\t\t<BlockPatternsList\n\t\t\tblockPatterns={ blockPatterns }\n\t\t\tshownPatterns={ shownBlockPatterns }\n\t\t\tonClickPattern={ ( _pattern, blocks ) => {\n\t\t\t\tresetEditorBlocks( blocks );\n\t\t\t\tonChoosePattern();\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction StartPageOptionsModal( { onClose } ) {\n\tconst startPatterns = useStartPatterns();\n\tconst hasStartPattern = startPatterns.length > 0;\n\n\tif ( ! hasStartPattern ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"edit-post-start-page-options__modal\"\n\t\t\ttitle={ __( 'Choose a pattern' ) }\n\t\t\tisFullScreen\n\t\t\tonRequestClose={ onClose }\n\t\t>\n\t\t\t<div className=\"edit-post-start-page-options__modal-content\">\n\t\t\t\t<PatternSelection\n\t\t\t\t\tblockPatterns={ startPatterns }\n\t\t\t\t\tonChoosePattern={ onClose }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default function StartPageOptions() {\n\tconst [ isClosed, setIsClosed ] = useState( false );\n\tconst shouldEnableModal = useSelect( ( select ) => {\n\t\tconst { isCleanNewPost } = select( editorStore );\n\t\tconst { isEditingTemplate, isFeatureActive } = select( editPostStore );\n\n\t\treturn (\n\t\t\t! isEditingTemplate() &&\n\t\t\t! isFeatureActive( 'welcomeGuide' ) &&\n\t\t\tisCleanNewPost()\n\t\t);\n\t}, [] );\n\n\tif ( ! shouldEnableModal || isClosed ) {\n\t\treturn null;\n\t}\n\n\treturn <StartPageOptionsModal onClose={ () => setIsClosed( true ) } />;\n}\n"],"mappings":"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"}

package/build-style/style-rtl.css

@@ -584,6 +584,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   flex-wrap: wrap;
   align-items: center;
   max-width: 100vw;
+  justify-content: space-between;
 }
 @media (min-width: 280px) {
   .edit-post-header {
@@ -601,7 +602,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .edit-post-header__toolbar {
   display: flex;
-  flex-grow: 1;
+  flex-shrink: 8;
+  flex-grow: 3;
+  overflow: hidden;
+  padding: 2px 0;
+  align-items: center;
 }
 .edit-post-header__toolbar .table-of-contents {
   display: none;
@@ -611,12 +616,28 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     display: block;
   }
 }
+.edit-post-header__toolbar .block-editor-block-contextual-toolbar.is-fixed {
+  border: none;
+}
+.edit-post-header__toolbar .selected-block-tools-wrapper {
+  overflow-x: hidden;
+}
+.edit-post-header__toolbar .selected-block-tools-wrapper.is-collapsed {
+  display: none;
+}
+
+.edit-post-header__block-tools-toggle {
+  margin-right: 2px;
+}
 
 .edit-post-header__center {
   flex-grow: 1;
   display: flex;
   justify-content: center;
 }
+.edit-post-header__center.is-collapsed {
+  display: none;
+}
 
 /**
  * Buttons on the right side
@@ -624,7 +645,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .edit-post-header__settings {
   display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   padding-left: 4px;
   gap: 4px;
 }
@@ -1222,12 +1243,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   height: 61px;
 }
 
-@media (min-width: 782px) {
-  .edit-post-layout.has-fixed-toolbar .interface-interface-skeleton__header:not(:focus-within) {
-    z-index: 19;
-  }
-}
-
 .edit-post-block-manager__no-results {
   font-style: italic;
   padding: 24px 0;
@@ -1597,9 +1612,12 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 .edit-post-post-schedule span {
   display: block;
-  width: 45%;
-  flex-shrink: 0;
-  padding: 6px 0;
+  width: 30%;
+  margin-left: 8px;
+}
+
+.edit-post-post-schedule__dropdown {
+  width: 70%;
 }
 
 .components-button.edit-post-post-schedule__toggle {
@@ -1627,8 +1645,8 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 .edit-post-post-template span {
   display: block;
-  width: 45%;
-  padding: 6px 0;
+  width: 30%;
+  margin-left: 8px;
 }
 
 .edit-post-post-template__dropdown {
@@ -1657,38 +1675,14 @@ 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 {
-  text-align: right;
-  white-space: normal;
-  height: auto;
-  word-break: break-word;
-}
-
-.edit-post-post-url__dialog .editor-post-url {
-  min-width: 248px;
-  margin: 8px;
-}
-
 .edit-post-post-visibility {
   width: 100%;
   justify-content: flex-start;
 }
 .edit-post-post-visibility span {
   display: block;
-  width: 45%;
-  padding: 6px 0;
+  width: 30%;
+  margin-left: 8px;
 }
 
 .edit-post-post-visibility__dialog .editor-post-visibility {
@@ -1849,7 +1843,7 @@ h2.edit-post-template-summary__title {
   font-size: 13px;
   padding: 6px 12px;
 }
-.edit-post-visual-editor .components-button.is-tertiary, .edit-post-visual-editor .components-button.has-icon {
+.edit-post-visual-editor .components-button.has-icon {
   padding: 6px;
 }
 
@@ -1871,99 +1865,6 @@ h2.edit-post-template-summary__title {
   flex-grow: 1;
 }
 
-.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  /* Set left position when auto-fold is not on the body element. */
-  right: 0;
-}
-@media (min-width: 783px) {
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    right: 160px;
-  }
-}
-
-.auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
-}
-@media (min-width: 783px) {
-  .auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    right: 36px;
-  }
-}
-@media (min-width: 961px) {
-  .auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    right: 160px;
-  }
-}
-
-/* Sidebar manually collapsed. */
-.folded .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  right: 0;
-}
-@media (min-width: 783px) {
-  .folded .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    right: 36px;
-  }
-}
-
-body.is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  right: 0 !important;
-}
-
-.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 31;
-  display: block;
-  width: 100%;
-}
-@media (min-width: 782px) {
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 180px;
-    position: fixed;
-    top: 32px;
-    min-height: initial;
-    border-bottom: none;
-    display: flex;
-    height: 60px;
-    align-items: center;
-    width: calc(100% - 180px);
-  }
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 240px;
-    top: 0;
-  }
-  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% + 40px - 180px);
-    margin-right: 80px;
-  }
-  .is-fullscreen-mode .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 144px;
-  }
-}
-@media (min-width: 960px) {
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 280px - 256px);
-  }
-}
-
 .edit-post-welcome-guide,
 .edit-template-welcome-guide {
   width: 312px;

package/build-style/style.css

@@ -584,6 +584,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   flex-wrap: wrap;
   align-items: center;
   max-width: 100vw;
+  justify-content: space-between;
 }
 @media (min-width: 280px) {
   .edit-post-header {
@@ -601,7 +602,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .edit-post-header__toolbar {
   display: flex;
-  flex-grow: 1;
+  flex-shrink: 8;
+  flex-grow: 3;
+  overflow: hidden;
+  padding: 2px 0;
+  align-items: center;
 }
 .edit-post-header__toolbar .table-of-contents {
   display: none;
@@ -611,12 +616,28 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     display: block;
   }
 }
+.edit-post-header__toolbar .block-editor-block-contextual-toolbar.is-fixed {
+  border: none;
+}
+.edit-post-header__toolbar .selected-block-tools-wrapper {
+  overflow-x: hidden;
+}
+.edit-post-header__toolbar .selected-block-tools-wrapper.is-collapsed {
+  display: none;
+}
+
+.edit-post-header__block-tools-toggle {
+  margin-left: 2px;
+}
 
 .edit-post-header__center {
   flex-grow: 1;
   display: flex;
   justify-content: center;
 }
+.edit-post-header__center.is-collapsed {
+  display: none;
+}
 
 /**
  * Buttons on the right side
@@ -624,7 +645,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .edit-post-header__settings {
   display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   padding-right: 4px;
   gap: 4px;
 }
@@ -1222,12 +1243,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   height: 61px;
 }
 
-@media (min-width: 782px) {
-  .edit-post-layout.has-fixed-toolbar .interface-interface-skeleton__header:not(:focus-within) {
-    z-index: 19;
-  }
-}
-
 .edit-post-block-manager__no-results {
   font-style: italic;
   padding: 24px 0;
@@ -1597,9 +1612,12 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 .edit-post-post-schedule span {
   display: block;
-  width: 45%;
-  flex-shrink: 0;
-  padding: 6px 0;
+  width: 30%;
+  margin-right: 8px;
+}
+
+.edit-post-post-schedule__dropdown {
+  width: 70%;
 }
 
 .components-button.edit-post-post-schedule__toggle {
@@ -1627,8 +1645,8 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 .edit-post-post-template span {
   display: block;
-  width: 45%;
-  padding: 6px 0;
+  width: 30%;
+  margin-right: 8px;
 }
 
 .edit-post-post-template__dropdown {
@@ -1657,38 +1675,14 @@ 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 {
-  text-align: left;
-  white-space: normal;
-  height: auto;
-  word-break: break-word;
-}
-
-.edit-post-post-url__dialog .editor-post-url {
-  min-width: 248px;
-  margin: 8px;
-}
-
 .edit-post-post-visibility {
   width: 100%;
   justify-content: flex-start;
 }
 .edit-post-post-visibility span {
   display: block;
-  width: 45%;
-  padding: 6px 0;
+  width: 30%;
+  margin-right: 8px;
 }
 
 .edit-post-post-visibility__dialog .editor-post-visibility {
@@ -1849,7 +1843,7 @@ h2.edit-post-template-summary__title {
   font-size: 13px;
   padding: 6px 12px;
 }
-.edit-post-visual-editor .components-button.is-tertiary, .edit-post-visual-editor .components-button.has-icon {
+.edit-post-visual-editor .components-button.has-icon {
   padding: 6px;
 }
 
@@ -1871,99 +1865,6 @@ h2.edit-post-template-summary__title {
   flex-grow: 1;
 }
 
-.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  /* Set left position when auto-fold is not on the body element. */
-  left: 0;
-}
-@media (min-width: 783px) {
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 160px;
-  }
-}
-
-.auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
-}
-@media (min-width: 783px) {
-  .auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 36px;
-  }
-}
-@media (min-width: 961px) {
-  .auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 160px;
-  }
-}
-
-/* Sidebar manually collapsed. */
-.folded .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  left: 0;
-}
-@media (min-width: 783px) {
-  .folded .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 36px;
-  }
-}
-
-body.is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  left: 0 !important;
-}
-
-.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 31;
-  display: block;
-  width: 100%;
-}
-@media (min-width: 782px) {
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 180px;
-    position: fixed;
-    top: 32px;
-    min-height: initial;
-    border-bottom: none;
-    display: flex;
-    height: 60px;
-    align-items: center;
-    width: calc(100% - 180px);
-  }
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 240px;
-    top: 0;
-  }
-  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% + 40px - 180px);
-    margin-left: 80px;
-  }
-  .is-fullscreen-mode .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 144px;
-  }
-}
-@media (min-width: 960px) {
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 280px - 256px);
-  }
-}
-
 .edit-post-welcome-guide,
 .edit-template-welcome-guide {
   width: 312px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.22.0",
+	"version": "7.23.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,36 +27,36 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.45.0",
-		"@wordpress/api-fetch": "^6.42.0",
-		"@wordpress/block-editor": "^12.13.0",
-		"@wordpress/block-library": "^8.22.0",
-		"@wordpress/blocks": "^12.22.0",
-		"@wordpress/commands": "^0.16.0",
-		"@wordpress/components": "^25.11.0",
-		"@wordpress/compose": "^6.22.0",
-		"@wordpress/core-commands": "^0.14.0",
-		"@wordpress/core-data": "^6.22.0",
-		"@wordpress/data": "^9.15.0",
-		"@wordpress/deprecated": "^3.45.0",
-		"@wordpress/dom": "^3.45.0",
-		"@wordpress/editor": "^13.22.0",
-		"@wordpress/element": "^5.22.0",
-		"@wordpress/hooks": "^3.45.0",
-		"@wordpress/i18n": "^4.45.0",
-		"@wordpress/icons": "^9.36.0",
-		"@wordpress/interface": "^5.22.0",
-		"@wordpress/keyboard-shortcuts": "^4.22.0",
-		"@wordpress/keycodes": "^3.45.0",
-		"@wordpress/media-utils": "^4.36.0",
-		"@wordpress/notices": "^4.13.0",
-		"@wordpress/plugins": "^6.13.0",
-		"@wordpress/preferences": "^3.22.0",
-		"@wordpress/private-apis": "^0.27.0",
-		"@wordpress/url": "^3.46.0",
-		"@wordpress/viewport": "^5.22.0",
-		"@wordpress/warning": "^2.45.0",
-		"@wordpress/widgets": "^3.22.0",
+		"@wordpress/a11y": "^3.46.0",
+		"@wordpress/api-fetch": "^6.43.0",
+		"@wordpress/block-editor": "^12.14.0",
+		"@wordpress/block-library": "^8.23.0",
+		"@wordpress/blocks": "^12.23.0",
+		"@wordpress/commands": "^0.17.0",
+		"@wordpress/components": "^25.12.0",
+		"@wordpress/compose": "^6.23.0",
+		"@wordpress/core-commands": "^0.15.0",
+		"@wordpress/core-data": "^6.23.0",
+		"@wordpress/data": "^9.16.0",
+		"@wordpress/deprecated": "^3.46.0",
+		"@wordpress/dom": "^3.46.0",
+		"@wordpress/editor": "^13.23.0",
+		"@wordpress/element": "^5.23.0",
+		"@wordpress/hooks": "^3.46.0",
+		"@wordpress/i18n": "^4.46.0",
+		"@wordpress/icons": "^9.37.0",
+		"@wordpress/interface": "^5.23.0",
+		"@wordpress/keyboard-shortcuts": "^4.23.0",
+		"@wordpress/keycodes": "^3.46.0",
+		"@wordpress/media-utils": "^4.37.0",
+		"@wordpress/notices": "^4.14.0",
+		"@wordpress/plugins": "^6.14.0",
+		"@wordpress/preferences": "^3.23.0",
+		"@wordpress/private-apis": "^0.28.0",
+		"@wordpress/url": "^3.47.0",
+		"@wordpress/viewport": "^5.23.0",
+		"@wordpress/warning": "^2.46.0",
+		"@wordpress/widgets": "^3.23.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2a00e87b57b9c27ed2b9b0fd8d423ef3cada72c1"
+	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
 }