@wordpress/block-library 9.3.0 → 9.5.0

package/build-style/gallery/theme.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

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

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -124,17 +127,6 @@
   border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child::after::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  pointer-events: none;
-  background: currentColor;
-  opacity: 0.1;
-}
 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-inserter,
 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-button-block-appender {
   pointer-events: all;

package/build-style/group/editor.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -124,17 +127,6 @@
   border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child::after::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-  background: currentColor;
-  opacity: 0.1;
-}
 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-inserter,
 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-button-block-appender {
   pointer-events: all;

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

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

package/build-style/group/style.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

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

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

package/build-style/group/theme.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

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

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

package/build-style/heading/style.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

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

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

package/build-style/html/editor.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

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

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -86,7 +89,7 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-image.wp-block-image.is-selected .components-placeholder {
+.wp-block-image.wp-block-image.is-selected .block-editor-media-placeholder {
   color: #1e1e1e;
   background-color: #fff;
   box-shadow: inset 0 0 0 1px #1e1e1e;
@@ -94,13 +97,13 @@
   filter: none !important;
   border-radius: 2px;
 }
-.wp-block-image.wp-block-image.is-selected .components-placeholder > svg {
+.wp-block-image.wp-block-image.is-selected .block-editor-media-placeholder > svg {
   opacity: 0;
 }
-.wp-block-image.wp-block-image.is-selected .components-placeholder .components-placeholder__illustration {
+.wp-block-image.wp-block-image.is-selected .block-editor-media-placeholder .components-placeholder__illustration {
   display: none;
 }
-.wp-block-image.wp-block-image.is-selected .components-placeholder::before {
+.wp-block-image.wp-block-image.is-selected .block-editor-media-placeholder::before {
   opacity: 0;
 }
 .wp-block-image.wp-block-image .block-bindings-media-placeholder-message {
@@ -133,6 +136,18 @@ figure.wp-block-image:not(.wp-block) {
   top: 50%;
   right: 50%;
   transform: translate(50%, -50%);
+  margin: 0;
+}
+
+.wp-block-image__placeholder {
+  aspect-ratio: 4/3;
+}
+.wp-block-image__placeholder.has-illustration::before {
+  background: #fff;
+  opacity: 0.8;
+}
+.wp-block-image__placeholder .components-placeholder__illustration {
+  opacity: 0.1;
 }
 
 .wp-block-image .components-resizable-box__container {

package/build-style/image/editor.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -86,7 +89,7 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-image.wp-block-image.is-selected .components-placeholder {
+.wp-block-image.wp-block-image.is-selected .block-editor-media-placeholder {
   color: #1e1e1e;
   background-color: #fff;
   box-shadow: inset 0 0 0 1px #1e1e1e;
@@ -94,13 +97,13 @@
   filter: none !important;
   border-radius: 2px;
 }
-.wp-block-image.wp-block-image.is-selected .components-placeholder > svg {
+.wp-block-image.wp-block-image.is-selected .block-editor-media-placeholder > svg {
   opacity: 0;
 }
-.wp-block-image.wp-block-image.is-selected .components-placeholder .components-placeholder__illustration {
+.wp-block-image.wp-block-image.is-selected .block-editor-media-placeholder .components-placeholder__illustration {
   display: none;
 }
-.wp-block-image.wp-block-image.is-selected .components-placeholder::before {
+.wp-block-image.wp-block-image.is-selected .block-editor-media-placeholder::before {
   opacity: 0;
 }
 .wp-block-image.wp-block-image .block-bindings-media-placeholder-message {
@@ -133,6 +136,18 @@ figure.wp-block-image:not(.wp-block) {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  margin: 0;
+}
+
+.wp-block-image__placeholder {
+  aspect-ratio: 4/3;
+}
+.wp-block-image__placeholder.has-illustration::before {
+  background: #fff;
+  opacity: 0.8;
+}
+.wp-block-image__placeholder .components-placeholder__illustration {
+  opacity: 0.1;
 }
 
 .wp-block-image .components-resizable-box__container {

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

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -95,6 +98,14 @@
   vertical-align: bottom;
   box-sizing: border-box;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .wp-block-image img.hide {
+    visibility: hidden;
+  }
+  .wp-block-image img.show {
+    animation: show-content-image 0.4s;
+  }
+}
 .wp-block-image[style*=border-radius] > a,
 .wp-block-image[style*=border-radius] img {
   border-radius: inherit;
@@ -338,6 +349,17 @@
   }
 }
 
+@keyframes show-content-image {
+  0% {
+    visibility: hidden;
+  }
+  99% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: visible;
+  }
+}
 @keyframes turn-on-visibility {
   0% {
     opacity: 0;

package/build-style/image/style.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -95,6 +98,14 @@
   vertical-align: bottom;
   box-sizing: border-box;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .wp-block-image img.hide {
+    visibility: hidden;
+  }
+  .wp-block-image img.show {
+    animation: show-content-image 0.4s;
+  }
+}
 .wp-block-image[style*=border-radius] > a,
 .wp-block-image[style*=border-radius] img {
   border-radius: inherit;
@@ -344,6 +355,17 @@
   }
 }
 
+@keyframes show-content-image {
+  0% {
+    visibility: hidden;
+  }
+  99% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: visible;
+  }
+}
 @keyframes turn-on-visibility {
   0% {
     opacity: 0;

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

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

package/build-style/image/theme.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

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

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

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

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

package/build-style/latest-posts/editor-rtl.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -94,9 +97,6 @@
   display: inline;
 }
 
-.editor-latest-posts-image-alignment-control .components-base-control__label {
-  display: block;
-}
 .editor-latest-posts-image-alignment-control .components-toolbar {
   border-radius: 2px;
 }

package/build-style/latest-posts/editor.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -94,9 +97,6 @@
   display: inline;
 }
 
-.editor-latest-posts-image-alignment-control .components-base-control__label {
-  display: block;
-}
 .editor-latest-posts-image-alignment-control .components-toolbar {
   border-radius: 2px;
 }

package/build-style/latest-posts/style-rtl.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

package/build-style/latest-posts/style.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

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

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -91,6 +94,6 @@ ul {
   box-sizing: border-box;
 }
 
-:root :where(ul.has-background, ol.has-background) {
+:root :where(.wp-block-list.has-background) {
   padding: 1.25em 2.375em;
 }

package/build-style/list/style.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -91,6 +94,6 @@ ul {
   box-sizing: border-box;
 }
 
-:root :where(ul.has-background, ol.has-background) {
+:root :where(.wp-block-list.has-background) {
   padding: 1.25em 2.375em;
 }

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

@@ -0,0 +1,94 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * 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.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * 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
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * 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-loginout {
+  box-sizing: border-box;
+}

package/build-style/loginout/style.css

@@ -0,0 +1,94 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * 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.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * 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
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * 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-loginout {
+  box-sizing: border-box;
+}

package/build-style/media-text/editor-rtl.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */