@wordpress/block-library 6.0.12 → 6.0.17-next.33ec3857e2.0

package/build-style/comments-pagination-numbers/editor.css

@@ -0,0 +1,86 @@
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+.wp-block-comments-pagination-numbers a {
+  text-decoration: underline;
+}
+.wp-block-comments-pagination-numbers .page-numbers {
+  margin-right: 2px;
+}
+.wp-block-comments-pagination-numbers .page-numbers:last-child {
+  /*rtl:ignore*/
+  margin-right: 0;
+}

package/build-style/common-rtl.css

@@ -96,6 +96,8 @@
    */
   /* 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;
@@ -139,6 +141,14 @@
   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;
 }
@@ -205,4 +215,23 @@
   top: 5px;
   width: auto;
   z-index: 100000;
+}
+
+/**
+ * The following provide a simple means of applying a default border style when
+ * a user first makes a selection in the border block support panel.
+ * This prevents issues such as where the user could set a border width
+ * and see no border due there being no border style set.
+ *
+ * This is intended to be removed once intelligent defaults can be set while
+ * making border selections via the block support.
+ *
+ * See: https://github.com/WordPress/gutenberg/pull/33743
+ */
+html :where(.has-border-color) {
+  border-style: solid;
+}
+
+html :where([style*="border-width"]) {
+  border-style: solid;
 }

package/build-style/common.css

@@ -96,6 +96,8 @@
    */
   /* 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;
@@ -139,6 +141,14 @@
   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;
 }
@@ -207,4 +217,23 @@
   top: 5px;
   width: auto;
   z-index: 100000;
+}
+
+/**
+ * The following provide a simple means of applying a default border style when
+ * a user first makes a selection in the border block support panel.
+ * This prevents issues such as where the user could set a border width
+ * and see no border due there being no border style set.
+ *
+ * This is intended to be removed once intelligent defaults can be set while
+ * making border selections via the block support.
+ *
+ * See: https://github.com/WordPress/gutenberg/pull/33743
+ */
+html :where(.has-border-color) {
+  border-style: solid;
+}
+
+html :where([style*="border-width"]) {
+  border-style: solid;
 }

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

@@ -189,6 +189,10 @@
 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100 {
   opacity: 1;
 }
+.wp-block-cover-image .block-library-cover__padding-visualizer,
+.wp-block-cover .block-library-cover__padding-visualizer {
+  z-index: 2;
+}
 .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright,
 .wp-block-cover.alignleft,
 .wp-block-cover.alignright {

package/build-style/cover/style.css

@@ -189,6 +189,10 @@
 .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100 {
   opacity: 1;
 }
+.wp-block-cover-image .block-library-cover__padding-visualizer,
+.wp-block-cover .block-library-cover__padding-visualizer {
+  z-index: 2;
+}
 .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright,
 .wp-block-cover.alignleft,
 .wp-block-cover.alignright {

package/build-style/editor-rtl.css

@@ -234,6 +234,41 @@ html :where(.wp-block-column) {
   margin-bottom: 0;
 }
 
+.wp-block[data-align=center] > .wp-block-comments-pagination {
+  justify-content: center;
+}
+
+.editor-styles-wrapper .wp-block-comments-pagination {
+  max-width: 100%;
+}
+.editor-styles-wrapper .wp-block-comments-pagination.block-editor-block-list__layout {
+  margin: 0;
+}
+
+.wp-block-comments-pagination > .wp-block-comments-pagination-next,
+.wp-block-comments-pagination > .wp-block-comments-pagination-previous,
+.wp-block-comments-pagination > .wp-block-comments-pagination-numbers {
+  margin-right: 0;
+  margin-top: 0.5em;
+  margin-right: 0.5em;
+  margin-bottom: 0.5em;
+}
+.wp-block-comments-pagination > .wp-block-comments-pagination-next:last-child,
+.wp-block-comments-pagination > .wp-block-comments-pagination-previous:last-child,
+.wp-block-comments-pagination > .wp-block-comments-pagination-numbers:last-child {
+  margin-right: 0;
+}
+
+.wp-block-comments-pagination-numbers a {
+  text-decoration: underline;
+}
+.wp-block-comments-pagination-numbers .page-numbers {
+  margin-left: 2px;
+}
+.wp-block-comments-pagination-numbers .page-numbers:last-child {
+  margin-right: 0;
+}
+
 .wp-block-cover {
   /* Extra specificity needed because the reset.css applied in the editor context is overriding this rule. */
 }
@@ -755,18 +790,6 @@ figure.wp-block-gallery .block-editor-media-placeholder.is-appender .block-edito
 figure.wp-block-gallery .block-editor-media-placeholder {
   margin: 0;
 }
-figure.wp-block-gallery .block-editor-media-placeholder::before {
-  box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
-  content: "";
-  outline: 2px solid transparent;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 1;
-  pointer-events: none;
-}
 figure.wp-block-gallery .block-editor-media-placeholder .components-placeholder__label {
   display: flex;
 }
@@ -1005,6 +1028,22 @@ figure.wp-block-image:not(.wp-block) {
   caption-side: bottom;
 }
 
+*:not([data-align]) > .wp-block-image {
+  display: grid;
+  grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
+}
+*:not([data-align]) > .wp-block-image .components-placeholder {
+  grid-column: placeholder;
+}
+*:not([data-align]) > .wp-block-image > div:not(.components-placeholder) {
+  grid-column: image;
+}
+*:not([data-align]) > .wp-block-image > figcaption {
+  grid-column: image;
+  display: table-caption;
+  caption-side: bottom;
+}
+
 .wp-block[data-align=left] > .wp-block-image {
   margin-left: 1em;
   margin-right: 0;
@@ -1219,6 +1258,15 @@ figure.wp-block-image:not(.wp-block) {
   visibility: visible;
 }
 
+.is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
+  display: block;
+  position: static;
+}
+
+.wp-block-navigation__submenu-container .block-list-appender {
+  display: none;
+}
+
 /**
  * Colors Selector component
  */
@@ -2435,10 +2483,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin: 0;
 }
 
-.block-library-query-pagination-toolbar__popover .components-popover__content {
-  min-width: 230px;
-}
-
 .wp-block-query-pagination > .wp-block-query-pagination-next,
 .wp-block-query-pagination > .wp-block-query-pagination-previous,
 .wp-block-query-pagination > .wp-block-query-pagination-numbers {
@@ -2571,13 +2615,6 @@ div[data-type="core/post-featured-image"] img {
   display: block;
 }
 
-.block-library-post-featured-image-dimension-controls {
-  margin-bottom: 8px;
-}
-.block-library-post-featured-image-dimension-controls.scale-control-is-visible {
-  margin-bottom: 16px;
-}
-
 :root .editor-styles-wrapper {
   /*
    * Our classes uses the same values we set for gradient value attributes,
@@ -2585,6 +2622,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;
@@ -2628,6 +2667,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

@@ -235,6 +235,44 @@ html :where(.wp-block-column) {
   margin-bottom: 0;
 }
 
+.wp-block[data-align=center] > .wp-block-comments-pagination {
+  justify-content: center;
+}
+
+.editor-styles-wrapper .wp-block-comments-pagination {
+  max-width: 100%;
+}
+.editor-styles-wrapper .wp-block-comments-pagination.block-editor-block-list__layout {
+  margin: 0;
+}
+
+.wp-block-comments-pagination > .wp-block-comments-pagination-next,
+.wp-block-comments-pagination > .wp-block-comments-pagination-previous,
+.wp-block-comments-pagination > .wp-block-comments-pagination-numbers {
+  margin-left: 0;
+  margin-top: 0.5em;
+  /*rtl:ignore*/
+  margin-right: 0.5em;
+  margin-bottom: 0.5em;
+}
+.wp-block-comments-pagination > .wp-block-comments-pagination-next:last-child,
+.wp-block-comments-pagination > .wp-block-comments-pagination-previous:last-child,
+.wp-block-comments-pagination > .wp-block-comments-pagination-numbers:last-child {
+  /*rtl:ignore*/
+  margin-right: 0;
+}
+
+.wp-block-comments-pagination-numbers a {
+  text-decoration: underline;
+}
+.wp-block-comments-pagination-numbers .page-numbers {
+  margin-right: 2px;
+}
+.wp-block-comments-pagination-numbers .page-numbers:last-child {
+  /*rtl:ignore*/
+  margin-right: 0;
+}
+
 .wp-block-cover {
   /* Extra specificity needed because the reset.css applied in the editor context is overriding this rule. */
 }
@@ -760,18 +798,6 @@ figure.wp-block-gallery .block-editor-media-placeholder.is-appender .block-edito
 figure.wp-block-gallery .block-editor-media-placeholder {
   margin: 0;
 }
-figure.wp-block-gallery .block-editor-media-placeholder::before {
-  box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
-  content: "";
-  outline: 2px solid transparent;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  pointer-events: none;
-}
 figure.wp-block-gallery .block-editor-media-placeholder .components-placeholder__label {
   display: flex;
 }
@@ -1010,6 +1036,22 @@ figure.wp-block-image:not(.wp-block) {
   caption-side: bottom;
 }
 
+*:not([data-align]) > .wp-block-image {
+  display: grid;
+  grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
+}
+*:not([data-align]) > .wp-block-image .components-placeholder {
+  grid-column: placeholder;
+}
+*:not([data-align]) > .wp-block-image > div:not(.components-placeholder) {
+  grid-column: image;
+}
+*:not([data-align]) > .wp-block-image > figcaption {
+  grid-column: image;
+  display: table-caption;
+  caption-side: bottom;
+}
+
 .wp-block[data-align=left] > .wp-block-image {
   margin-right: 1em;
   margin-left: 0;
@@ -1224,6 +1266,15 @@ figure.wp-block-image:not(.wp-block) {
   visibility: visible;
 }
 
+.is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
+  display: block;
+  position: static;
+}
+
+.wp-block-navigation__submenu-container .block-list-appender {
+  display: none;
+}
+
 /**
  * Colors Selector component
  */
@@ -2440,10 +2491,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin: 0;
 }
 
-.block-library-query-pagination-toolbar__popover .components-popover__content {
-  min-width: 230px;
-}
-
 .wp-block-query-pagination > .wp-block-query-pagination-next,
 .wp-block-query-pagination > .wp-block-query-pagination-previous,
 .wp-block-query-pagination > .wp-block-query-pagination-numbers {
@@ -2579,13 +2626,6 @@ div[data-type="core/post-featured-image"] img {
   display: block;
 }
 
-.block-library-post-featured-image-dimension-controls {
-  margin-bottom: 8px;
-}
-.block-library-post-featured-image-dimension-controls.scale-control-is-visible {
-  margin-bottom: 16px;
-}
-
 :root .editor-styles-wrapper {
   /*
    * Our classes uses the same values we set for gradient value attributes,
@@ -2593,6 +2633,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;
@@ -2636,6 +2678,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/gallery/editor-rtl.css

@@ -108,18 +108,6 @@ figure.wp-block-gallery .block-editor-media-placeholder.is-appender .block-edito
 figure.wp-block-gallery .block-editor-media-placeholder {
   margin: 0;
 }
-figure.wp-block-gallery .block-editor-media-placeholder::before {
-  box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
-  content: "";
-  outline: 2px solid transparent;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 1;
-  pointer-events: none;
-}
 figure.wp-block-gallery .block-editor-media-placeholder .components-placeholder__label {
   display: flex;
 }

package/build-style/gallery/editor.css

@@ -108,18 +108,6 @@ figure.wp-block-gallery .block-editor-media-placeholder.is-appender .block-edito
 figure.wp-block-gallery .block-editor-media-placeholder {
   margin: 0;
 }
-figure.wp-block-gallery .block-editor-media-placeholder::before {
-  box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
-  content: "";
-  outline: 2px solid transparent;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  pointer-events: none;
-}
 figure.wp-block-gallery .block-editor-media-placeholder .components-placeholder__label {
   display: flex;
 }

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

@@ -318,6 +318,9 @@
 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption img {
   display: inline;
 }
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption a {
+  color: inherit;
+}
 .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > div,
 .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > a {
   flex: 1 1 auto;

package/build-style/gallery/style.css

@@ -318,6 +318,9 @@
 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption img {
   display: inline;
 }
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption a {
+  color: inherit;
+}
 .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > div,
 .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > a {
   flex: 1 1 auto;

package/build-style/group/theme-rtl.css

@@ -74,6 +74,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-group:where(.has-background) {
+:where(.wp-block-group.has-background) {
   padding: 1.25em 2.375em;
 }

package/build-style/group/theme.css

@@ -74,6 +74,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-group:where(.has-background) {
+:where(.wp-block-group.has-background) {
   padding: 1.25em 2.375em;
 }

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

@@ -137,6 +137,22 @@ figure.wp-block-image:not(.wp-block) {
   caption-side: bottom;
 }
 
+*:not([data-align]) > .wp-block-image {
+  display: grid;
+  grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
+}
+*:not([data-align]) > .wp-block-image .components-placeholder {
+  grid-column: placeholder;
+}
+*:not([data-align]) > .wp-block-image > div:not(.components-placeholder) {
+  grid-column: image;
+}
+*:not([data-align]) > .wp-block-image > figcaption {
+  grid-column: image;
+  display: table-caption;
+  caption-side: bottom;
+}
+
 .wp-block[data-align=left] > .wp-block-image {
   margin-left: 1em;
   margin-right: 0;

package/build-style/image/editor.css

@@ -137,6 +137,22 @@ figure.wp-block-image:not(.wp-block) {
   caption-side: bottom;
 }
 
+*:not([data-align]) > .wp-block-image {
+  display: grid;
+  grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
+}
+*:not([data-align]) > .wp-block-image .components-placeholder {
+  grid-column: placeholder;
+}
+*:not([data-align]) > .wp-block-image > div:not(.components-placeholder) {
+  grid-column: image;
+}
+*:not([data-align]) > .wp-block-image > figcaption {
+  grid-column: image;
+  display: table-caption;
+  caption-side: bottom;
+}
+
 .wp-block[data-align=left] > .wp-block-image {
   margin-right: 1em;
   margin-left: 0;

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

@@ -137,6 +137,15 @@
   visibility: visible;
 }
 
+.is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
+  display: block;
+  position: static;
+}
+
+.wp-block-navigation__submenu-container .block-list-appender {
+  display: none;
+}
+
 /**
  * Colors Selector component
  */

package/build-style/navigation/editor.css

@@ -137,6 +137,15 @@
   visibility: visible;
 }
 
+.is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
+  display: block;
+  position: static;
+}
+
+.wp-block-navigation__submenu-container .block-list-appender {
+  display: none;
+}
+
 /**
  * Colors Selector component
  */