@wordpress/block-library 6.0.3 → 6.0.4

package/build-module/navigation/view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/navigation/view.js"],"names":["MicroModal","navigationToggleModal","modal","triggerButton","document","querySelector","id","closeButton","isHidden","getAttribute","setAttribute","classList","toggle","htmlElement","documentElement","closeSubmenus","element","querySelectorAll","forEach","toggleSubmenuOnClick","event","buttonToggle","target","closest","isSubmenuOpen","parentElement","navigationParent","child","submenuButtons","button","addEventListener","navigationBlocks","block","contains","submenuBlocks","window","onload","init","onShow","onClose","openClass"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB,C,CAEA;;AACA,SAASC,qBAAT,CAAgCC,KAAhC,EAAwC;AACvC,QAAMC,aAAa,GAAGC,QAAQ,CAACC,aAAT,CACpB,mCAAmCH,KAAK,CAACI,EAAI,IADzB,CAAtB;AAGA,QAAMC,WAAW,GAAGL,KAAK,CAACG,aAAN,CAAqB,+BAArB,CAApB,CAJuC,CAKvC;AACA;;AACA,QAAMG,QAAQ,GAAG,WAAWN,KAAK,CAACO,YAAN,CAAoB,aAApB,CAA5B;AACAN,EAAAA,aAAa,CAACO,YAAd,CAA4B,eAA5B,EAA6C,CAAEF,QAA/C;AACAD,EAAAA,WAAW,CAACG,YAAZ,CAA0B,eAA1B,EAA2C,CAAEF,QAA7C;AACAN,EAAAA,KAAK,CAACS,SAAN,CAAgBC,MAAhB,CAAwB,gBAAxB,EAA0C,CAAEJ,QAA5C,EAVuC,CAYvC;;AACA,QAAMK,WAAW,GAAGT,QAAQ,CAACU,eAA7B;AACAD,EAAAA,WAAW,CAACF,SAAZ,CAAsBC,MAAtB,CAA8B,gBAA9B;AACA,C,CAED;;;AACA,SAASG,aAAT,CAAwBC,OAAxB,EAAkC;AACjCA,EAAAA,OAAO,CACLC,gBADF,CACoB,wBADpB,EAEEC,OAFF,CAEW,UAAWN,MAAX,EAAoB;AAC7BA,IAAAA,MAAM,CAACF,YAAP,CAAqB,eAArB,EAAsC,OAAtC;AACA,GAJF;AAKA;;AAED,SAASS,oBAAT,CAA+BC,KAA/B,EAAuC;AACtC,QAAMC,YAAY,GAAGD,KAAK,CAACE,MAAN,CAAaC,OAAb,CAAsB,iBAAtB,CAArB;AACA,QAAMC,aAAa,GAAGH,YAAY,CAACZ,YAAb,CAA2B,eAA3B,CAAtB;;AAEA,MAAKe,aAAa,KAAK,MAAvB,EAAgC;AAC/BT,IAAAA,aAAa,CAAEM,YAAY,CAACE,OAAb,CAAsB,2BAAtB,CAAF,CAAb;AACA,GAFD,MAEO;AACN;AACA,UAAME,aAAa,GAAGJ,YAAY,CAACE,OAAb,CACrB,2BADqB,CAAtB;AAGA,UAAMG,gBAAgB,GAAGL,YAAY,CAACE,OAAb,CACxB,+FADwB,CAAzB;AAGAG,IAAAA,gBAAgB,CACdT,gBADF,CACoB,2BADpB,EAEEC,OAFF,CAEW,UAAWS,KAAX,EAAmB;AAC5B,UAAKA,KAAK,KAAKF,aAAf,EAA+B;AAC9BV,QAAAA,aAAa,CAAEY,KAAF,CAAb;AACA;AACD,KANF,EARM,CAeN;;AACAN,IAAAA,YAAY,CAACX,YAAb,CAA2B,eAA3B,EAA4C,MAA5C;AACA;AACD;;AAED,MAAMkB,cAAc,GAAGxB,QAAQ,CAACa,gBAAT,CACtB,sCADsB,CAAvB;AAIAW,cAAc,CAACV,OAAf,CAAwB,UAAWW,MAAX,EAAoB;AAC3CA,EAAAA,MAAM,CAACC,gBAAP,CAAyB,OAAzB,EAAkCX,oBAAlC;AACA,CAFD,E,CAIA;;AACAf,QAAQ,CAAC0B,gBAAT,CAA2B,OAA3B,EAAoC,UAAWV,KAAX,EAAmB;AACtD,QAAMW,gBAAgB,GAAG3B,QAAQ,CAACa,gBAAT,CACxB,sBADwB,CAAzB;AAGAc,EAAAA,gBAAgB,CAACb,OAAjB,CAA0B,UAAWc,KAAX,EAAmB;AAC5C,QAAK,CAAEA,KAAK,CAACC,QAAN,CAAgBb,KAAK,CAACE,MAAtB,CAAP,EAAwC;AACvCP,MAAAA,aAAa,CAAEiB,KAAF,CAAb;AACA;AACD,GAJD;AAKA,CATD,E,CAUA;;AACA5B,QAAQ,CAAC0B,gBAAT,CAA2B,OAA3B,EAAoC,UAAWV,KAAX,EAAmB;AACtD,QAAMc,aAAa,GAAG9B,QAAQ,CAACa,gBAAT,CACrB,qCADqB,CAAtB;AAGAiB,EAAAA,aAAa,CAAChB,OAAd,CAAuB,UAAWc,KAAX,EAAmB;AACzC,QAAK,CAAEA,KAAK,CAACC,QAAN,CAAgBb,KAAK,CAACE,MAAtB,CAAP,EAAwC;AACvCP,MAAAA,aAAa,CAAEiB,KAAF,CAAb;AACA;AACD,GAJD;AAKA,CATD,E,CAWA;AACA;;AACAG,MAAM,CAACC,MAAP,GAAgB,MACfpC,UAAU,CAACqC,IAAX,CAAiB;AAChBC,EAAAA,MAAM,EAAErC,qBADQ;AAEhBsC,EAAAA,OAAO,EAAEtC,qBAFO;AAGhBuC,EAAAA,SAAS,EAAE;AAHK,CAAjB,CADD","sourcesContent":["/**\n * External dependencies\n */\nimport MicroModal from 'micromodal';\n\n// Responsive navigation toggle.\nfunction navigationToggleModal( modal ) {\n\tconst triggerButton = document.querySelector(\n\t\t`button[data-micromodal-trigger=\"${ modal.id }\"]`\n\t);\n\tconst closeButton = modal.querySelector( 'button[data-micromodal-close]' );\n\t// Use aria-hidden to determine the status of the modal, as this attribute is\n\t// managed by micromodal.\n\tconst isHidden = 'true' === modal.getAttribute( 'aria-hidden' );\n\ttriggerButton.setAttribute( 'aria-expanded', ! isHidden );\n\tcloseButton.setAttribute( 'aria-expanded', ! isHidden );\n\tmodal.classList.toggle( 'has-modal-open', ! isHidden );\n\n\t// Add a class to indicate the modal is open.\n\tconst htmlElement = document.documentElement;\n\thtmlElement.classList.toggle( 'has-modal-open' );\n}\n\n// Open on click functionality.\nfunction closeSubmenus( element ) {\n\telement\n\t\t.querySelectorAll( '[aria-expanded=\"true\"]' )\n\t\t.forEach( function ( toggle ) {\n\t\t\ttoggle.setAttribute( 'aria-expanded', 'false' );\n\t\t} );\n}\n\nfunction toggleSubmenuOnClick( event ) {\n\tconst buttonToggle = event.target.closest( '[aria-expanded]' );\n\tconst isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );\n\n\tif ( isSubmenuOpen === 'true' ) {\n\t\tcloseSubmenus( buttonToggle.closest( '.wp-block-navigation-item' ) );\n\t} else {\n\t\t// Close all sibling submenus.\n\t\tconst parentElement = buttonToggle.closest(\n\t\t\t'.wp-block-navigation-item'\n\t\t);\n\t\tconst navigationParent = buttonToggle.closest(\n\t\t\t'.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'\n\t\t);\n\t\tnavigationParent\n\t\t\t.querySelectorAll( '.wp-block-navigation-item' )\n\t\t\t.forEach( function ( child ) {\n\t\t\t\tif ( child !== parentElement ) {\n\t\t\t\t\tcloseSubmenus( child );\n\t\t\t\t}\n\t\t\t} );\n\t\t// Open submenu.\n\t\tbuttonToggle.setAttribute( 'aria-expanded', 'true' );\n\t}\n}\n\nconst submenuButtons = document.querySelectorAll(\n\t'.wp-block-navigation-submenu__toggle'\n);\n\nsubmenuButtons.forEach( function ( button ) {\n\tbutton.addEventListener( 'click', toggleSubmenuOnClick );\n} );\n\n// Close on click outside.\ndocument.addEventListener( 'click', function ( event ) {\n\tconst navigationBlocks = document.querySelectorAll(\n\t\t'.wp-block-navigation'\n\t);\n\tnavigationBlocks.forEach( function ( block ) {\n\t\tif ( ! block.contains( event.target ) ) {\n\t\t\tcloseSubmenus( block );\n\t\t}\n\t} );\n} );\n// Close on focus outside.\ndocument.addEventListener( 'keyup', function ( event ) {\n\tconst submenuBlocks = document.querySelectorAll(\n\t\t'.wp-block-navigation-item.has-child'\n\t);\n\tsubmenuBlocks.forEach( function ( block ) {\n\t\tif ( ! block.contains( event.target ) ) {\n\t\t\tcloseSubmenus( block );\n\t\t}\n\t} );\n} );\n\n// Necessary for some themes such as TT1 Blocks, where\n// scripts could be loaded before the body.\nwindow.onload = () =>\n\tMicroModal.init( {\n\t\tonShow: navigationToggleModal,\n\t\tonClose: navigationToggleModal,\n\t\topenClass: 'is-menu-open',\n\t} );\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/navigation/view.js"],"names":["MicroModal","navigationToggleModal","modal","triggerButton","document","querySelector","id","closeButton","isHidden","getAttribute","setAttribute","classList","toggle","htmlElement","documentElement","closeSubmenus","element","querySelectorAll","forEach","toggleSubmenuOnClick","event","buttonToggle","target","closest","isSubmenuOpen","parentElement","navigationParent","child","window","onload","init","onShow","onClose","openClass","submenuButtons","button","addEventListener","navigationBlocks","block","contains","submenuBlocks"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport MicroModal from 'micromodal';\n\n// Responsive navigation toggle.\nfunction navigationToggleModal( modal ) {\n\tconst triggerButton = document.querySelector(\n\t\t`button[data-micromodal-trigger=\"${ modal.id }\"]`\n\t);\n\tconst closeButton = modal.querySelector( 'button[data-micromodal-close]' );\n\t// Use aria-hidden to determine the status of the modal, as this attribute is\n\t// managed by micromodal.\n\tconst isHidden = 'true' === modal.getAttribute( 'aria-hidden' );\n\ttriggerButton.setAttribute( 'aria-expanded', ! isHidden );\n\tcloseButton.setAttribute( 'aria-expanded', ! isHidden );\n\tmodal.classList.toggle( 'has-modal-open', ! isHidden );\n\n\t// Add a class to indicate the modal is open.\n\tconst htmlElement = document.documentElement;\n\thtmlElement.classList.toggle( 'has-modal-open' );\n}\n\n// Open on click functionality.\nfunction closeSubmenus( element ) {\n\telement\n\t\t.querySelectorAll( '[aria-expanded=\"true\"]' )\n\t\t.forEach( function ( toggle ) {\n\t\t\ttoggle.setAttribute( 'aria-expanded', 'false' );\n\t\t} );\n}\n\nfunction toggleSubmenuOnClick( event ) {\n\tconst buttonToggle = event.target.closest( '[aria-expanded]' );\n\tconst isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );\n\n\tif ( isSubmenuOpen === 'true' ) {\n\t\tcloseSubmenus( buttonToggle.closest( '.wp-block-navigation-item' ) );\n\t} else {\n\t\t// Close all sibling submenus.\n\t\tconst parentElement = buttonToggle.closest(\n\t\t\t'.wp-block-navigation-item'\n\t\t);\n\t\tconst navigationParent = buttonToggle.closest(\n\t\t\t'.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'\n\t\t);\n\t\tnavigationParent\n\t\t\t.querySelectorAll( '.wp-block-navigation-item' )\n\t\t\t.forEach( function ( child ) {\n\t\t\t\tif ( child !== parentElement ) {\n\t\t\t\t\tcloseSubmenus( child );\n\t\t\t\t}\n\t\t\t} );\n\t\t// Open submenu.\n\t\tbuttonToggle.setAttribute( 'aria-expanded', 'true' );\n\t}\n}\n\n// Necessary for some themes such as TT1 Blocks, where\n// scripts could be loaded before the body.\nwindow.onload = () => {\n\tMicroModal.init( {\n\t\tonShow: navigationToggleModal,\n\t\tonClose: navigationToggleModal,\n\t\topenClass: 'is-menu-open',\n\t} );\n\n\tconst submenuButtons = document.querySelectorAll(\n\t\t'.wp-block-navigation-submenu__toggle'\n\t);\n\n\tsubmenuButtons.forEach( function ( button ) {\n\t\tbutton.addEventListener( 'click', toggleSubmenuOnClick );\n\t} );\n\n\t// Close on click outside.\n\tdocument.addEventListener( 'click', function ( event ) {\n\t\tconst navigationBlocks = document.querySelectorAll(\n\t\t\t'.wp-block-navigation'\n\t\t);\n\t\tnavigationBlocks.forEach( function ( block ) {\n\t\t\tif ( ! block.contains( event.target ) ) {\n\t\t\t\tcloseSubmenus( block );\n\t\t\t}\n\t\t} );\n\t} );\n\t// Close on focus outside.\n\tdocument.addEventListener( 'keyup', function ( event ) {\n\t\tconst submenuBlocks = document.querySelectorAll(\n\t\t\t'.wp-block-navigation-item.has-child'\n\t\t);\n\t\tsubmenuBlocks.forEach( function ( block ) {\n\t\t\tif ( ! block.contains( event.target ) ) {\n\t\t\t\tcloseSubmenus( block );\n\t\t\t}\n\t\t} );\n\t} );\n};\n"]}

package/build-style/navigation/style-rtl.css

@@ -264,6 +264,11 @@
 }
 
 .wp-block-navigation__container {
+  display: flex;
+  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
   list-style: none;
   margin: 0;
   padding-right: 0;
@@ -284,7 +289,11 @@
   bottom: 0;
 }
 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
-  display: contents;
+  display: flex;
+  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
@@ -293,12 +302,12 @@
   z-index: 100000;
   padding: 72px 24px 24px 24px;
   background-color: inherit;
-  align-items: inherit;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
   display: flex;
   flex-direction: column;
-  align-items: var(--justification-setting, inherit);
+  align-items: var(--layout-justification-setting, inherit);
+  justify-content: flex-start;
   overflow: auto;
   padding: 0;
 }
@@ -336,7 +345,7 @@
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
   display: flex;
   flex-direction: column;
-  align-items: var(--justification-setting, inherit);
+  align-items: var(--layout-justification-setting, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
@@ -349,7 +358,7 @@
 }
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
-    display: contents;
+    display: block;
     width: 100%;
     position: relative;
     z-index: 2;
@@ -416,15 +425,4 @@
 
 html.has-modal-open {
   overflow: hidden;
-}
-
-.wp-block-navigation__responsive-close,
-.wp-block-navigation__responsive-dialog,
-.wp-block-navigation__container {
-  display: contents;
-}
-.is-menu-open .wp-block-navigation__responsive-close,
-.is-menu-open .wp-block-navigation__responsive-dialog,
-.is-menu-open .wp-block-navigation__container {
-  align-items: inherit;
 }

package/build-style/navigation/style.css

@@ -264,6 +264,11 @@
 }
 
 .wp-block-navigation__container {
+  display: flex;
+  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
   list-style: none;
   margin: 0;
   padding-left: 0;
@@ -284,7 +289,11 @@
   bottom: 0;
 }
 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
-  display: contents;
+  display: flex;
+  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
@@ -293,12 +302,12 @@
   z-index: 100000;
   padding: 72px 24px 24px 24px;
   background-color: inherit;
-  align-items: inherit;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
   display: flex;
   flex-direction: column;
-  align-items: var(--justification-setting, inherit);
+  align-items: var(--layout-justification-setting, inherit);
+  justify-content: flex-start;
   overflow: auto;
   padding: 0;
 }
@@ -336,7 +345,7 @@
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
   display: flex;
   flex-direction: column;
-  align-items: var(--justification-setting, inherit);
+  align-items: var(--layout-justification-setting, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
@@ -349,7 +358,7 @@
 }
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
-    display: contents;
+    display: block;
     width: 100%;
     position: relative;
     z-index: 2;
@@ -416,15 +425,4 @@
 
 html.has-modal-open {
   overflow: hidden;
-}
-
-.wp-block-navigation__responsive-close,
-.wp-block-navigation__responsive-dialog,
-.wp-block-navigation__container {
-  display: contents;
-}
-.is-menu-open .wp-block-navigation__responsive-close,
-.is-menu-open .wp-block-navigation__responsive-dialog,
-.is-menu-open .wp-block-navigation__container {
-  align-items: inherit;
 }

package/build-style/navigation-submenu/style-rtl.css

@@ -88,6 +88,7 @@ button.wp-block-navigation-item__content {
   color: currentColor;
   font-size: inherit;
   font-family: inherit;
+  text-align: right;
 }
 
 .wp-block-navigation-submenu__toggle {

package/build-style/navigation-submenu/style.css

@@ -88,6 +88,7 @@ button.wp-block-navigation-item__content {
   color: currentColor;
   font-size: inherit;
   font-family: inherit;
+  text-align: left;
 }
 
 .wp-block-navigation-submenu__toggle {

package/build-style/page-list/style-rtl.css

@@ -75,8 +75,11 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-navigation .wp-block-page-list {
-  display: contents;
-  flex-wrap: wrap;
+  display: flex;
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
+  flex-wrap: var(--layout-wrap, wrap);
   background-color: inherit;
 }
 .wp-block-navigation .wp-block-navigation-item {

package/build-style/page-list/style.css

@@ -75,8 +75,11 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-navigation .wp-block-page-list {
-  display: contents;
-  flex-wrap: wrap;
+  display: flex;
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
+  flex-wrap: var(--layout-wrap, wrap);
   background-color: inherit;
 }
 .wp-block-navigation .wp-block-navigation-item {

package/build-style/style-rtl.css

@@ -1669,6 +1669,11 @@ ul.has-background {
 }
 
 .wp-block-navigation__container {
+  display: flex;
+  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
   list-style: none;
   margin: 0;
   padding-right: 0;
@@ -1689,7 +1694,11 @@ ul.has-background {
   bottom: 0;
 }
 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
-  display: contents;
+  display: flex;
+  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
@@ -1698,12 +1707,12 @@ ul.has-background {
   z-index: 100000;
   padding: 72px 24px 24px 24px;
   background-color: inherit;
-  align-items: inherit;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
   display: flex;
   flex-direction: column;
-  align-items: var(--justification-setting, inherit);
+  align-items: var(--layout-justification-setting, inherit);
+  justify-content: flex-start;
   overflow: auto;
   padding: 0;
 }
@@ -1741,7 +1750,7 @@ ul.has-background {
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
   display: flex;
   flex-direction: column;
-  align-items: var(--justification-setting, inherit);
+  align-items: var(--layout-justification-setting, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
@@ -1754,7 +1763,7 @@ ul.has-background {
 }
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
-    display: contents;
+    display: block;
     width: 100%;
     position: relative;
     z-index: 2;
@@ -1823,17 +1832,6 @@ html.has-modal-open {
   overflow: hidden;
 }
 
-.wp-block-navigation__responsive-close,
-.wp-block-navigation__responsive-dialog,
-.wp-block-navigation__container {
-  display: contents;
-}
-.is-menu-open .wp-block-navigation__responsive-close,
-.is-menu-open .wp-block-navigation__responsive-dialog,
-.is-menu-open .wp-block-navigation__container {
-  align-items: inherit;
-}
-
 .wp-block-navigation .wp-block-navigation-item__label {
   word-break: normal;
   overflow-wrap: break-word;
@@ -1853,6 +1851,7 @@ button.wp-block-navigation-item__content {
   color: currentColor;
   font-size: inherit;
   font-family: inherit;
+  text-align: right;
 }
 
 .wp-block-navigation-submenu__toggle {
@@ -1889,8 +1888,11 @@ button.wp-block-navigation-item__content {
 }
 
 .wp-block-navigation .wp-block-page-list {
-  display: contents;
-  flex-wrap: wrap;
+  display: flex;
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
+  flex-wrap: var(--layout-wrap, wrap);
   background-color: inherit;
 }
 .wp-block-navigation .wp-block-navigation-item {
@@ -2165,10 +2167,6 @@ p.has-background {
   color: inherit;
 }
 
-.wp-block-post-content + * {
-  clear: both;
-}
-
 .wp-block-post-template,
 .wp-block-query-loop {
   margin-top: 0;

package/build-style/style.css

@@ -1691,6 +1691,11 @@ ul.has-background {
 }
 
 .wp-block-navigation__container {
+  display: flex;
+  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
   list-style: none;
   margin: 0;
   padding-left: 0;
@@ -1711,7 +1716,11 @@ ul.has-background {
   bottom: 0;
 }
 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
-  display: contents;
+  display: flex;
+  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
@@ -1720,12 +1729,12 @@ ul.has-background {
   z-index: 100000;
   padding: 72px 24px 24px 24px;
   background-color: inherit;
-  align-items: inherit;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
   display: flex;
   flex-direction: column;
-  align-items: var(--justification-setting, inherit);
+  align-items: var(--layout-justification-setting, inherit);
+  justify-content: flex-start;
   overflow: auto;
   padding: 0;
 }
@@ -1763,7 +1772,7 @@ ul.has-background {
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
   display: flex;
   flex-direction: column;
-  align-items: var(--justification-setting, inherit);
+  align-items: var(--layout-justification-setting, initial);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
@@ -1776,7 +1785,7 @@ ul.has-background {
 }
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
-    display: contents;
+    display: block;
     width: 100%;
     position: relative;
     z-index: 2;
@@ -1845,17 +1854,6 @@ html.has-modal-open {
   overflow: hidden;
 }
 
-.wp-block-navigation__responsive-close,
-.wp-block-navigation__responsive-dialog,
-.wp-block-navigation__container {
-  display: contents;
-}
-.is-menu-open .wp-block-navigation__responsive-close,
-.is-menu-open .wp-block-navigation__responsive-dialog,
-.is-menu-open .wp-block-navigation__container {
-  align-items: inherit;
-}
-
 .wp-block-navigation .wp-block-navigation-item__label {
   word-break: normal;
   overflow-wrap: break-word;
@@ -1875,6 +1873,7 @@ button.wp-block-navigation-item__content {
   color: currentColor;
   font-size: inherit;
   font-family: inherit;
+  text-align: left;
 }
 
 .wp-block-navigation-submenu__toggle {
@@ -1911,8 +1910,11 @@ button.wp-block-navigation-item__content {
 }
 
 .wp-block-navigation .wp-block-page-list {
-  display: contents;
-  flex-wrap: wrap;
+  display: flex;
+  flex-direction: var(--layout-direction, initial);
+  justify-content: var(--layout-justify, initial);
+  align-items: var(--layout-align, initial);
+  flex-wrap: var(--layout-wrap, wrap);
   background-color: inherit;
 }
 .wp-block-navigation .wp-block-navigation-item {
@@ -2187,10 +2189,6 @@ p.has-background {
   color: inherit;
 }
 
-.wp-block-post-content + * {
-  clear: both;
-}
-
 .wp-block-post-template,
 .wp-block-query-loop {
   margin-top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "6.0.3",
+	"version": "6.0.4",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,7 +37,7 @@
 		"@wordpress/api-fetch": "^5.2.5",
 		"@wordpress/autop": "^3.2.2",
 		"@wordpress/blob": "^3.2.1",
-		"@wordpress/block-editor": "^8.0.0",
+		"@wordpress/block-editor": "^8.0.1",
 		"@wordpress/blocks": "^11.1.3",
 		"@wordpress/components": "^19.0.1",
 		"@wordpress/compose": "^5.0.5",
@@ -57,7 +57,7 @@
 		"@wordpress/keycodes": "^3.2.3",
 		"@wordpress/notices": "^3.2.6",
 		"@wordpress/primitives": "^3.0.3",
-		"@wordpress/reusable-blocks": "^3.0.5",
+		"@wordpress/reusable-blocks": "^3.0.6",
 		"@wordpress/rich-text": "^5.0.5",
 		"@wordpress/server-side-render": "^3.0.5",
 		"@wordpress/url": "^3.3.0",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "393c2b5533837fd637e998d23f0124c081a10df0"
+	"gitHead": "f89b63995376fe6efe920d858b48268b510920e1"
 }

package/src/buttons/deprecated.js

@@ -15,18 +15,20 @@ const migrateWithLayout = ( attributes ) => {
 		return attributes;
 	}
 
-	const { contentJustification, orientation } = attributes;
-
-	const updatedAttributes = {
-		...attributes,
-	};
+	const {
+		contentJustification,
+		orientation,
+		...updatedAttributes
+	} = attributes;
 
 	if ( contentJustification || orientation ) {
 		Object.assign( updatedAttributes, {
 			layout: {
 				type: 'flex',
-				justifyContent: contentJustification || 'left',
-				orientation: orientation || 'horizontal',
+				...( contentJustification && {
+					justifyContent: contentJustification,
+				} ),
+				...( orientation && { orientation } ),
 			},
 		} );
 	}
@@ -57,7 +59,8 @@ const deprecated = [
 				},
 			},
 		},
-		isEligible: ( { layout } ) => ! layout,
+		isEligible: ( { contentJustification, orientation } ) =>
+			!! contentJustification || !! orientation,
 		migrate: migrateWithLayout,
 		save( { attributes: { contentJustification, orientation } } ) {
 			return (

package/src/buttons/edit.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import {
-	BlockControls,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
@@ -39,10 +38,6 @@ function ButtonsEdit( { attributes: { layout = {} } } ) {
 
 	return (
 		<>
-			<BlockControls
-				group="block"
-				__experimentalShareWithChildBlocks
-			></BlockControls>
 			<div { ...innerBlocksProps } />
 		</>
 	);

package/src/column/block.json

@@ -17,7 +17,7 @@
 			"type": "array"
 		},
 		"templateLock": {
-			"type": "string",
+			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", false ]
 		}
 	},

package/src/cover/block.json

@@ -67,7 +67,7 @@
 			"type": "array"
 		},
 		"templateLock": {
-			"type": "string",
+			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", false ]
 		}
 	},

package/src/gallery/edit.js

@@ -97,7 +97,7 @@ function GalleryEdit( props ) {
 		shortCodeTransforms,
 		sizeSlug,
 	} = attributes;
-	useMobileWarning();
+
 	const {
 		__unstableMarkNextChangeAsNotPersistent,
 		replaceInnerBlocks,
@@ -139,6 +139,8 @@ function GalleryEdit( props ) {
 
 	const newImages = useGetNewImages( images, imageData );
 
+	useMobileWarning( newImages );
+
 	useEffect( () => {
 		newImages?.forEach( ( newImage ) => {
 			updateBlockAttributes( newImage.clientId, {

package/src/gallery/use-mobile-warning.js

@@ -6,7 +6,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as noticesStore } from '@wordpress/notices';
 
-export default function useMobileWarning() {
+export default function useMobileWarning( newImages ) {
 	const { createWarningNotice } = useDispatch( noticesStore );
 	const { toggleFeature } = useDispatch( interfaceStore );
 	const isMobileWarningActive = useSelect( ( select ) => {
@@ -14,7 +14,7 @@ export default function useMobileWarning() {
 		return isFeatureActive( 'core/edit-post', 'mobileGalleryWarning' );
 	}, [] );
 
-	if ( ! isMobileWarningActive ) {
+	if ( ! isMobileWarningActive || ! newImages ) {
 		return;
 	}
 

package/src/group/block.json

@@ -12,7 +12,7 @@
 			"default": "div"
 		},
 		"templateLock": {
-			"type": "string",
+			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", false ]
 		}
 	},

package/src/navigation/block.json

@@ -114,7 +114,8 @@
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"default": {
-				"type": "flex"
+				"type": "flex",
+				"setCascadingProperties": true
 			}
 		}
 	},

package/src/navigation/edit/placeholder/index.js

@@ -46,7 +46,7 @@ const ExistingMenusDropdown = ( {
 		>
 			{ ( { onClose } ) => (
 				<>
-					<MenuGroup label="Menus">
+					<MenuGroup label={ __( 'Menus' ) }>
 						{ canSwitchNavigationMenu &&
 							navigationMenus.map( ( menu ) => {
 								return (
@@ -63,7 +63,7 @@ const ExistingMenusDropdown = ( {
 								);
 							} ) }
 					</MenuGroup>
-					<MenuGroup label="Classic Menus">
+					<MenuGroup label={ __( 'Classic Menus' ) }>
 						{ menus.map( ( menu ) => {
 							return (
 								<MenuItem

package/src/navigation/edit/responsive-wrapper.js

@@ -61,11 +61,7 @@ export default function ResponsiveWrapper( {
 				</Button>
 			) }
 
-			<div
-				className={ responsiveContainerClasses }
-				id={ modalId }
-				aria-hidden={ ! isOpen }
-			>
+			<div className={ responsiveContainerClasses } id={ modalId }>
 				<div
 					className="wp-block-navigation__responsive-close"
 					tabIndex="-1"