@wordpress/block-library 6.0.12 → 6.0.16

package/build-style/navigation/style.css

@@ -76,6 +76,11 @@
  */
 .wp-block-navigation {
   position: relative;
+  --navigation-layout-justification-setting: flex-start;
+  --navigation-layout-direction: row;
+  --navigation-layout-wrap: wrap;
+  --navigation-layout-justify: flex-start;
+  --navigation-layout-align: center;
 }
 .wp-block-navigation ul {
   margin-top: 0;
@@ -137,6 +142,31 @@
   width: inherit;
   height: inherit;
 }
+.wp-block-navigation.is-vertical {
+  --navigation-layout-direction: column;
+  --navigation-layout-justify: initial;
+}
+.wp-block-navigation.no-wrap {
+  --navigation-layout-wrap: nowrap;
+}
+.wp-block-navigation.items-justified-center {
+  --navigation-layout-justification-setting: center;
+  --navigation-layout-justify: center;
+}
+.wp-block-navigation.items-justified-center.is-vertical {
+  --navigation-layout-align: center;
+}
+.wp-block-navigation.items-justified-right {
+  --navigation-layout-justification-setting: flex-end;
+  --navigation-layout-justify: flex-end;
+}
+.wp-block-navigation.items-justified-right.is-vertical {
+  --navigation-layout-align: flex-end;
+}
+.wp-block-navigation.items-justified-space-between {
+  --navigation-layout-justification-setting: space-between;
+  --navigation-layout-justify: space-between;
+}
 
 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) {
   background-color: inherit;
@@ -304,10 +334,10 @@ button.wp-block-navigation-item__content {
 
 .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);
+  flex-wrap: var(--navigation-layout-wrap, wrap);
+  flex-direction: var(--navigation-layout-direction, initial);
+  justify-content: var(--navigation-layout-justify, initial);
+  align-items: var(--navigation-layout-align, initial);
   list-style: none;
   margin: 0;
   padding-left: 0;
@@ -334,10 +364,10 @@ button.wp-block-navigation-item__content {
 }
 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
   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);
+  flex-wrap: var(--navigation-layout-wrap, wrap);
+  flex-direction: var(--navigation-layout-direction, initial);
+  justify-content: var(--navigation-layout-justify, initial);
+  align-items: var(--navigation-layout-align, initial);
 }
 .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
   color: inherit !important;
@@ -346,19 +376,21 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
   flex-direction: column;
+  background-color: inherit;
+  padding: 2em;
   overflow: auto;
   z-index: 100000;
-  padding: 72px 24px 24px 24px;
-  background-color: inherit;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
+  padding-top: calc(2em + 24px);
+  overflow: visible;
   display: flex;
   flex-direction: column;
-  align-items: var(--layout-justification-setting, inherit);
-  overflow: auto;
-  padding: 0;
+  flex-wrap: nowrap;
+  align-items: var(--navigation-layout-justification-setting, inherit);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
   justify-content: flex-start;
 }
@@ -375,17 +407,14 @@ button.wp-block-navigation-item__content {
   min-width: 200px;
   position: static;
   border: none;
-  padding-left: 32px;
-  padding-right: 32px;
+  padding-left: 2em;
+  padding-right: 2em;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
   gap: var(--wp--style--block-gap, 2em);
 }
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__submenu-container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__container {
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
   padding-top: var(--wp--style--block-gap, 2em);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
@@ -396,7 +425,7 @@ button.wp-block-navigation-item__content {
 .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(--layout-justification-setting, initial);
+  align-items: var(--navigation-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,
@@ -459,8 +488,8 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation__responsive-container-close {
   position: absolute;
-  top: 24px;
-  right: 24px;
+  top: 0;
+  right: 0;
   z-index: 2;
 }
 
@@ -471,8 +500,11 @@ button.wp-block-navigation-item__content {
 .is-menu-open .wp-block-navigation__responsive-close,
 .is-menu-open .wp-block-navigation__responsive-dialog,
 .is-menu-open .wp-block-navigation__responsive-container-content {
-  width: 100%;
-  height: 100%;
+  box-sizing: border-box;
+}
+
+.wp-block-navigation__responsive-dialog {
+  position: relative;
 }
 
 html.has-modal-open {

package/build-style/post-comments/style-rtl.css

@@ -125,7 +125,9 @@
   display: block;
   margin-bottom: 0.25em;
 }
-.wp-block-post-comments .comment-form-comment textarea {
+.wp-block-post-comments .comment-form textarea,
+.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
+  display: block;
   box-sizing: border-box;
   width: 100%;
 }

package/build-style/post-comments/style.css

@@ -125,7 +125,9 @@
   display: block;
   margin-bottom: 0.25em;
 }
-.wp-block-post-comments .comment-form-comment textarea {
+.wp-block-post-comments .comment-form textarea,
+.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
+  display: block;
   box-sizing: border-box;
   width: 100%;
 }

package/build-style/post-comments-form/style-rtl.css

@@ -110,12 +110,12 @@
 .wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]) {
   padding: calc(0.667em + 2px);
 }
-.wp-block-post-comments-form .comment-form-comment textarea {
+.wp-block-post-comments-form .comment-form textarea,
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
   display: block;
   box-sizing: border-box;
   width: 100%;
 }
-.wp-block-post-comments-form .comment-form-comment label,
 .wp-block-post-comments-form .comment-form-author label,
 .wp-block-post-comments-form .comment-form-email label,
 .wp-block-post-comments-form .comment-form-url label {

package/build-style/post-comments-form/style.css

@@ -110,12 +110,12 @@
 .wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]) {
   padding: calc(0.667em + 2px);
 }
-.wp-block-post-comments-form .comment-form-comment textarea {
+.wp-block-post-comments-form .comment-form textarea,
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
   display: block;
   box-sizing: border-box;
   width: 100%;
 }
-.wp-block-post-comments-form .comment-form-comment label,
 .wp-block-post-comments-form .comment-form-author label,
 .wp-block-post-comments-form .comment-form-email label,
 .wp-block-post-comments-form .comment-form-url label {

package/build-style/site-logo/editor-rtl.css

@@ -75,24 +75,14 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block[data-align=center] > .wp-block-site-logo {
+  display: table;
   margin-right: auto;
   margin-left: auto;
-  text-align: center;
 }
 
 .wp-block-site-logo a {
   pointer-events: none;
 }
-.wp-block-site-logo:not(.is-default-size) {
-  display: table;
-}
-.wp-block-site-logo.is-default-size {
-  width: 120px;
-}
-.wp-block-site-logo.is-default-size img {
-  height: auto;
-  width: 100%;
-}
 .wp-block-site-logo .custom-logo-link {
   cursor: inherit;
 }

package/build-style/site-logo/editor.css

@@ -75,24 +75,14 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block[data-align=center] > .wp-block-site-logo {
+  display: table;
   margin-left: auto;
   margin-right: auto;
-  text-align: center;
 }
 
 .wp-block-site-logo a {
   pointer-events: none;
 }
-.wp-block-site-logo:not(.is-default-size) {
-  display: table;
-}
-.wp-block-site-logo.is-default-size {
-  width: 120px;
-}
-.wp-block-site-logo.is-default-size img {
-  height: auto;
-  width: 100%;
-}
 .wp-block-site-logo .custom-logo-link {
   cursor: inherit;
 }

package/build-style/site-logo/style-rtl.css

@@ -89,7 +89,9 @@
   border-radius: inherit;
 }
 .wp-block-site-logo.aligncenter {
-  display: table;
+  margin-right: auto;
+  margin-left: auto;
+  text-align: center;
 }
 .wp-block-site-logo.is-style-rounded {
   border-radius: 9999px;

package/build-style/site-logo/style.css

@@ -89,7 +89,9 @@
   border-radius: inherit;
 }
 .wp-block-site-logo.aligncenter {
-  display: table;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
 }
 .wp-block-site-logo.is-style-rounded {
   border-radius: 9999px;

package/build-style/style-rtl.css

@@ -1488,6 +1488,11 @@ ul.has-background {
 }
 .wp-block-navigation {
   position: relative;
+  --navigation-layout-justification-setting: flex-start;
+  --navigation-layout-direction: row;
+  --navigation-layout-wrap: wrap;
+  --navigation-layout-justify: flex-start;
+  --navigation-layout-align: center;
 }
 .wp-block-navigation ul {
   margin-top: 0;
@@ -1549,6 +1554,31 @@ ul.has-background {
   width: inherit;
   height: inherit;
 }
+.wp-block-navigation.is-vertical {
+  --navigation-layout-direction: column;
+  --navigation-layout-justify: initial;
+}
+.wp-block-navigation.no-wrap {
+  --navigation-layout-wrap: nowrap;
+}
+.wp-block-navigation.items-justified-center {
+  --navigation-layout-justification-setting: center;
+  --navigation-layout-justify: center;
+}
+.wp-block-navigation.items-justified-center.is-vertical {
+  --navigation-layout-align: center;
+}
+.wp-block-navigation.items-justified-right {
+  --navigation-layout-justification-setting: flex-end;
+  --navigation-layout-justify: flex-end;
+}
+.wp-block-navigation.items-justified-right.is-vertical {
+  --navigation-layout-align: flex-end;
+}
+.wp-block-navigation.items-justified-space-between {
+  --navigation-layout-justification-setting: space-between;
+  --navigation-layout-justify: space-between;
+}
 
 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) {
   background-color: inherit;
@@ -1716,10 +1746,10 @@ button.wp-block-navigation-item__content {
 
 .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);
+  flex-wrap: var(--navigation-layout-wrap, wrap);
+  flex-direction: var(--navigation-layout-direction, initial);
+  justify-content: var(--navigation-layout-justify, initial);
+  align-items: var(--navigation-layout-align, initial);
   list-style: none;
   margin: 0;
   padding-right: 0;
@@ -1746,10 +1776,10 @@ button.wp-block-navigation-item__content {
 }
 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
   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);
+  flex-wrap: var(--navigation-layout-wrap, wrap);
+  flex-direction: var(--navigation-layout-direction, initial);
+  justify-content: var(--navigation-layout-justify, initial);
+  align-items: var(--navigation-layout-align, initial);
 }
 .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
   color: inherit !important;
@@ -1758,19 +1788,21 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container.is-menu-open {
   display: flex;
   flex-direction: column;
+  background-color: inherit;
+  padding: 2em;
   overflow: auto;
   z-index: 100000;
-  padding: 72px 24px 24px 24px;
-  background-color: inherit;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
+  padding-top: calc(2em + 24px);
+  overflow: visible;
   display: flex;
   flex-direction: column;
-  align-items: var(--layout-justification-setting, inherit);
-  overflow: auto;
-  padding: 0;
+  flex-wrap: nowrap;
+  align-items: var(--navigation-layout-justification-setting, inherit);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
   justify-content: flex-start;
 }
@@ -1787,17 +1819,14 @@ button.wp-block-navigation-item__content {
   min-width: 200px;
   position: static;
   border: none;
-  padding-right: 32px;
-  padding-left: 32px;
+  padding-right: 2em;
+  padding-left: 2em;
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container,
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
   gap: var(--wp--style--block-gap, 2em);
 }
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__submenu-container,
-.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__container {
+.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
   padding-top: var(--wp--style--block-gap, 2em);
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
@@ -1808,7 +1837,7 @@ button.wp-block-navigation-item__content {
 .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(--layout-justification-setting, initial);
+  align-items: var(--navigation-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,
@@ -1871,8 +1900,8 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation__responsive-container-close {
   position: absolute;
-  top: 24px;
-  left: 24px;
+  top: 0;
+  left: 0;
   z-index: 2;
 }
 
@@ -1883,8 +1912,11 @@ button.wp-block-navigation-item__content {
 .is-menu-open .wp-block-navigation__responsive-close,
 .is-menu-open .wp-block-navigation__responsive-dialog,
 .is-menu-open .wp-block-navigation__responsive-container-content {
-  width: 100%;
-  height: 100%;
+  box-sizing: border-box;
+}
+
+.wp-block-navigation__responsive-dialog {
+  position: relative;
 }
 
 html.has-modal-open {
@@ -2055,7 +2087,9 @@ p.has-background {
   display: block;
   margin-bottom: 0.25em;
 }
-.wp-block-post-comments .comment-form-comment textarea {
+.wp-block-post-comments .comment-form textarea,
+.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
+  display: block;
   box-sizing: border-box;
   width: 100%;
 }
@@ -2120,12 +2154,12 @@ p.has-background {
 .wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]) {
   padding: calc(0.667em + 2px);
 }
-.wp-block-post-comments-form .comment-form-comment textarea {
+.wp-block-post-comments-form .comment-form textarea,
+.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]) {
   display: block;
   box-sizing: border-box;
   width: 100%;
 }
-.wp-block-post-comments-form .comment-form-comment label,
 .wp-block-post-comments-form .comment-form-author label,
 .wp-block-post-comments-form .comment-form-email label,
 .wp-block-post-comments-form .comment-form-url label {
@@ -2491,7 +2525,9 @@ ul.wp-block-rss.is-grid li {
   border-radius: inherit;
 }
 .wp-block-site-logo.aligncenter {
-  display: table;
+  margin-right: auto;
+  margin-left: auto;
+  text-align: center;
 }
 .wp-block-site-logo.is-style-rounded {
   border-radius: 9999px;
@@ -3041,6 +3077,8 @@ pre.wp-block-verse {
    */
   /* stylelint-disable function-comma-space-after */
   /* stylelint-enable function-comma-space-after */
+  --wp--preset--font-size--normal: 16px;
+  --wp--preset--font-size--huge: 42px;
 }
 :root .has-very-light-gray-background-color {
   background-color: #eee;
@@ -3084,6 +3122,14 @@ pre.wp-block-verse {
   font-size: 2.625em;
 }
 
+.has-normal-font-size {
+  font-size: var(--wp--preset--font-size--normal) !important;
+}
+
+.has-huge-font-size {
+  font-size: var(--wp--preset--font-size--huge) !important;
+}
+
 .has-text-align-center {
   text-align: center;
 }