@wordpress/block-library 6.0.14 → 6.0.17

package/build-style/editor-rtl.css

@@ -1238,6 +1238,7 @@ figure.wp-block-image:not(.wp-block) {
 .is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
   display: block;
   position: static;
+  width: 100%;
 }
 
 .wp-block-navigation__submenu-container .block-list-appender {
@@ -1436,6 +1437,7 @@ figure.wp-block-image:not(.wp-block) {
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   gap: 6px;
+  align-items: center;
   height: 100%;
 }
 .wp-block-navigation-placeholder__actions .components-dropdown,
@@ -1922,24 +1924,14 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 }
 
 .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;
 }
@@ -2610,6 +2602,8 @@ div[data-type="core/post-featured-image"] img {
    */
   /* 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 .editor-styles-wrapper .has-very-light-gray-background-color {
   background-color: #eee;
@@ -2653,6 +2647,14 @@ div[data-type="core/post-featured-image"] img {
   font-size: 42px;
 }
 
+.editor-styles-wrapper .has-normal-font-size {
+  font-size: var(--wp--preset--font-size--normal) !important;
+}
+
+.editor-styles-wrapper .has-huge-font-size {
+  font-size: var(--wp--preset--font-size--huge) !important;
+}
+
 /**
  * Editor Normalization Styles
  *

package/build-style/editor.css

@@ -1243,6 +1243,7 @@ figure.wp-block-image:not(.wp-block) {
 .is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
   display: block;
   position: static;
+  width: 100%;
 }
 
 .wp-block-navigation__submenu-container .block-list-appender {
@@ -1441,6 +1442,7 @@ figure.wp-block-image:not(.wp-block) {
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   gap: 6px;
+  align-items: center;
   height: 100%;
 }
 .wp-block-navigation-placeholder__actions .components-dropdown,
@@ -1927,24 +1929,14 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 }
 
 .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;
 }
@@ -2618,6 +2610,8 @@ div[data-type="core/post-featured-image"] img {
    */
   /* 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 .editor-styles-wrapper .has-very-light-gray-background-color {
   background-color: #eee;
@@ -2661,6 +2655,14 @@ div[data-type="core/post-featured-image"] img {
   font-size: 42px;
 }
 
+.editor-styles-wrapper .has-normal-font-size {
+  font-size: var(--wp--preset--font-size--normal) !important;
+}
+
+.editor-styles-wrapper .has-huge-font-size {
+  font-size: var(--wp--preset--font-size--huge) !important;
+}
+
 /**
  * Editor Normalization Styles
  *

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

@@ -140,6 +140,7 @@
 .is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
   display: block;
   position: static;
+  width: 100%;
 }
 
 .wp-block-navigation__submenu-container .block-list-appender {
@@ -338,6 +339,7 @@
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   gap: 6px;
+  align-items: center;
   height: 100%;
 }
 .wp-block-navigation-placeholder__actions .components-dropdown,

package/build-style/navigation/editor.css

@@ -140,6 +140,7 @@
 .is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
   display: block;
   position: static;
+  width: 100%;
 }
 
 .wp-block-navigation__submenu-container .block-list-appender {
@@ -338,6 +339,7 @@
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   gap: 6px;
+  align-items: center;
   height: 100%;
 }
 .wp-block-navigation-placeholder__actions .components-dropdown,

package/build-style/navigation/style-rtl.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-right: 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-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 {
@@ -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;
-  left: 24px;
+  top: 0;
+  left: 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/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

@@ -98,7 +98,6 @@
 }
 .wp-block-post-comments .comment-author {
   line-height: 1.5;
-  margin-right: -3.25em;
 }
 .wp-block-post-comments .comment-author .avatar {
   border-radius: 1.5em;

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

@@ -98,7 +98,6 @@
 }
 .wp-block-post-comments .comment-author {
   line-height: 1.5;
-  margin-left: -3.25em;
 }
 .wp-block-post-comments .comment-author .avatar {
   border-radius: 1.5em;

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;