@wordpress/block-library 7.19.0 → 8.1.0

package/build-style/common-rtl.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * 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
  */
@@ -46,15 +58,15 @@
 * @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.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -82,6 +94,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
@@ -195,6 +209,7 @@
 .screen-reader-text {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
@@ -208,7 +223,8 @@
 .screen-reader-text:focus {
   background-color: #ddd;
   clip: auto !important;
-  clip-path: none;
+  -webkit-clip-path: none;
+          clip-path: none;
   color: #444;
   display: block;
   font-size: 1em;

package/build-style/common.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * 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
  */
@@ -46,15 +58,15 @@
 * @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.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -82,6 +94,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
@@ -197,6 +211,7 @@
 .screen-reader-text {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
@@ -210,7 +225,8 @@
 .screen-reader-text:focus {
   background-color: #ddd;
   clip: auto !important;
-  clip-path: none;
+  -webkit-clip-path: none;
+          clip-path: none;
   color: #444;
   display: block;
   font-size: 1em;

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

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * 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
  */
@@ -46,15 +58,15 @@
 * @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.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */

package/build-style/cover/editor.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * 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
  */
@@ -46,15 +58,15 @@
 * @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.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */

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

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * 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
  */
@@ -46,15 +58,15 @@
 * @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.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -386,7 +398,8 @@
   height: 100%;
   max-width: none;
   max-height: none;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   outline: none;
   border: none;
   box-shadow: none;

package/build-style/cover/style.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * 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
  */
@@ -46,15 +58,15 @@
 * @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.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -388,7 +400,8 @@
   height: 100%;
   max-width: none;
   max-height: none;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   outline: none;
   border: none;
   box-shadow: none;

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

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * 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
  */
@@ -46,15 +58,15 @@
 * @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.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */

package/build-style/editor-elements.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * 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
  */
@@ -46,15 +58,15 @@
 * @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.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */

package/build-style/editor-rtl.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * 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
  */
@@ -46,15 +58,15 @@
 * @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.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -113,6 +125,16 @@ ul.wp-block-archives {
   display: none;
 }
 
+.edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted, .edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+}
+.edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+}
+.is-dark-theme .edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
+}
+
 .wp-block[data-align=center] > .wp-block-button {
   text-align: center;
   margin-right: auto;
@@ -1032,7 +1054,7 @@ figure.wp-block-gallery .components-spinner {
   }
 }
 .block-library-gallery-item__inline-menu:hover {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
 }
 @media (min-width: 600px) {
   .columns-7 .block-library-gallery-item__inline-menu, .columns-8 .block-library-gallery-item__inline-menu {
@@ -1328,15 +1350,6 @@ figure.wp-block-image:not(.wp-block) {
   min-width: 260px;
   overflow: visible !important;
 }
-.wp-block-image__zoom .components-range-control {
-  flex: 1;
-}
-.wp-block-image__zoom .components-base-control__field {
-  display: flex;
-  margin-bottom: 0;
-  flex-direction: column;
-  align-items: flex-start;
-}
 
 .wp-block-image__aspect-ratio {
   height: 46px;
@@ -1468,12 +1481,6 @@ figure.wp-block-image:not(.wp-block) {
 /**
  * Submenus.
  */
-.wp-block-navigation__container.is-parent-of-selected-block {
-  visibility: visible;
-  opacity: 1;
-  overflow: visible;
-}
-
 .wp-block-navigation__container,
 .wp-block-navigation-item {
   background-color: inherit;
@@ -2142,6 +2149,10 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   flex: inherit;
 }
 
+.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-page-list {
+  display: block;
+}
+
 .wp-block-pages-list__item__link {
   pointer-events: none;
 }
@@ -2264,7 +2275,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -2558,14 +2569,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
   border-style: double;
 }
-.wp-block-table figcaption {
-  color: #555;
-  font-size: 13px;
-  text-align: center;
-}
-.is-dark-theme .wp-block-table figcaption {
-  color: rgba(255, 255, 255, 0.65);
-}
 .wp-block-table table.has-individual-borders > *,
 .wp-block-table table.has-individual-borders tr,
 .wp-block-table table.has-individual-borders th,
@@ -2630,7 +2633,21 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   position: sticky;
   top: 0;
   padding: 16px 0;
-  z-index: 1;
+  z-index: 2;
+}
+
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+}
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+}
+.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
+.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
 }
 
 .wp-block-text-columns .block-editor-rich-text__editable:focus {

package/build-style/editor.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * 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
  */
@@ -46,15 +58,15 @@
 * @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.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -113,6 +125,16 @@ ul.wp-block-archives {
   display: none;
 }
 
+.edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted, .edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+}
+.edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+}
+.is-dark-theme .edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
+}
+
 .wp-block[data-align=center] > .wp-block-button {
   text-align: center;
   margin-left: auto;
@@ -1040,7 +1062,7 @@ figure.wp-block-gallery .components-spinner {
   }
 }
 .block-library-gallery-item__inline-menu:hover {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
 }
 @media (min-width: 600px) {
   .columns-7 .block-library-gallery-item__inline-menu, .columns-8 .block-library-gallery-item__inline-menu {
@@ -1336,15 +1358,6 @@ figure.wp-block-image:not(.wp-block) {
   min-width: 260px;
   overflow: visible !important;
 }
-.wp-block-image__zoom .components-range-control {
-  flex: 1;
-}
-.wp-block-image__zoom .components-base-control__field {
-  display: flex;
-  margin-bottom: 0;
-  flex-direction: column;
-  align-items: flex-start;
-}
 
 .wp-block-image__aspect-ratio {
   height: 46px;
@@ -1476,12 +1489,6 @@ figure.wp-block-image:not(.wp-block) {
 /**
  * Submenus.
  */
-.wp-block-navigation__container.is-parent-of-selected-block {
-  visibility: visible;
-  opacity: 1;
-  overflow: visible;
-}
-
 .wp-block-navigation__container,
 .wp-block-navigation-item {
   background-color: inherit;
@@ -2150,6 +2157,10 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   flex: inherit;
 }
 
+.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-page-list {
+  display: block;
+}
+
 .wp-block-pages-list__item__link {
   pointer-events: none;
 }
@@ -2272,7 +2283,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -2566,14 +2577,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
   border-style: double;
 }
-.wp-block-table figcaption {
-  color: #555;
-  font-size: 13px;
-  text-align: center;
-}
-.is-dark-theme .wp-block-table figcaption {
-  color: rgba(255, 255, 255, 0.65);
-}
 .wp-block-table table.has-individual-borders > *,
 .wp-block-table table.has-individual-borders tr,
 .wp-block-table table.has-individual-borders th,
@@ -2638,7 +2641,21 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   position: sticky;
   top: 0;
   padding: 16px 0;
-  z-index: 1;
+  z-index: 2;
+}
+
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+}
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+}
+.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
+.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
 }
 
 .wp-block-text-columns .block-editor-rich-text__editable:focus {