@wordpress/block-library 8.33.0 → 8.35.0

package/build-style/editor.css

@@ -125,14 +125,14 @@ 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.is-highlighted::after, .edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after {
+  outline-color: 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);
+  outline-color: 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;
+  outline-color: #fff;
 }
 
 .wp-block[data-align=center] > .wp-block-button {
@@ -199,7 +199,7 @@ div[data-type="core/button"] {
 }
 
 .wp-block-buttons {
-  /* stylelint-disable indentation */
+  /* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 }
 .wp-block-buttons > .wp-block {
   margin: 0;
@@ -566,9 +566,6 @@ html :where(.wp-block-column) {
   word-break: break-word;
 }
 
-.wp-block-embed__learn-more {
-  margin-top: 1em;
-}
 .wp-block-post-content .wp-block-embed__learn-more a {
   color: var(--wp-admin-theme-color);
 }
@@ -1252,54 +1249,11 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
   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-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;
 }
 
-.wp-block-group__placeholder .wp-block-group-placeholder__variations {
-  list-style: none;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-}
-.wp-block-group__placeholder .components-placeholder__instructions {
-  margin-bottom: 18px;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations svg {
-  fill: #ccc !important;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations svg:hover {
-  fill: var(--wp-admin-theme-color) !important;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations > li {
-  margin: 0 12px 12px 12px;
-  width: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button {
-  width: 44px;
-  height: 32px;
-  padding: 0;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button:hover {
-  box-shadow: none;
-}
-.wp-block-group__placeholder .components-placeholder {
-  min-height: auto;
-  padding: 24px;
-  align-items: center;
-}
-.wp-block-group__placeholder .is-small .wp-block-group-placeholder__variations > li,
-.wp-block-group__placeholder .is-medium .wp-block-group-placeholder__variations > li {
-  margin: 12px;
-}
-
 .block-library-html__edit .block-library-html__preview-overlay {
   position: absolute;
   width: 100%;
@@ -1444,6 +1398,9 @@ figure.wp-block-image:not(.wp-block) {
   width: 100%;
   overflow: hidden;
 }
+.wp-block-image__crop-area .reactEasyCrop_Container {
+  pointer-events: auto;
+}
 .wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
   border: none;
   border-radius: 0;
@@ -2352,17 +2309,8 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   display: inline;
 }
 
-.wp-block-rss__placeholder-form > * {
-  margin-bottom: 8px;
-}
-@media (min-width: 782px) {
-  .wp-block-rss__placeholder-form > * {
-    margin-bottom: 0;
-  }
-}
 .wp-block-rss__placeholder-form .wp-block-rss__placeholder-input {
-  flex: 1;
-  min-width: 80%;
+  flex: 1 1 auto;
 }
 
 .wp-block[data-align=center] .wp-block-search .wp-block-search__inside-wrapper {
@@ -2390,10 +2338,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   border: none;
 }
 
-[data-type="core/shortcode"].components-placeholder {
-  min-height: 0;
-}
-
 .blocks-shortcode__textarea {
   box-sizing: border-box;
   max-height: 250px;
@@ -2480,6 +2424,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 }
 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button {
   padding: 0;
+  margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -2560,14 +2505,25 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .wp-block-social-links .wp-social-link {
   line-height: 0;
 }
-.wp-block-social-links .wp-social-link button {
+
+.wp-block-social-link-anchor {
+  align-items: center;
+  background: none;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
   font-size: inherit;
   color: currentColor;
   height: auto;
-  line-height: 0;
   opacity: 1;
   padding: 0.25em;
 }
+.wp-block-social-link-anchor:focus:not(:disabled) {
+  border-radius: 2px;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 3px solid transparent;
+}
 
 .wp-block-social-links.is-style-pill-shape .wp-social-link button {
   padding-left: calc((2/3) * 1em);
@@ -2784,19 +2740,15 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted::after, .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected::after,
 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted::after,
 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-}
-.block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-hovered::after,
-.block-editor-block-list__block:not(.remove-outline).is-reusable.is-hovered::after {
-  box-shadow: 0 0 0 1px var(--wp-block-synced-color);
+  outline-color: var(--wp-block-synced-color);
 }
 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
 .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);
+  outline-color: var(--wp-block-synced-color);
 }
 .is-dark-theme .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
 .is-dark-theme .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;
+  outline-color: #fff;
 }
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.has-editable-outline::after {
@@ -3012,6 +2964,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button,
 .wp-block-post-featured-image .components-placeholder .components-button {
+  margin: auto;
   padding: 0;
   display: flex;
   justify-content: center;
@@ -3136,11 +3089,7 @@ div[data-type="core/post-featured-image"] img {
 }
 
 :root .editor-styles-wrapper {
-  /*
-   * Our classes uses the same values we set for gradient value attributes,
-   * and we can not use spacing because of WP multi site kses rule.
-   */
-  /* stylelint-disable function-comma-space-after */
+  /* stylelint-disable function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
   /* stylelint-enable function-comma-space-after */
 }
 :root .editor-styles-wrapper .has-very-light-gray-background-color {

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

@@ -99,9 +99,6 @@
   word-break: break-word;
 }
 
-.wp-block-embed__learn-more {
-  margin-top: 1em;
-}
 .wp-block-post-content .wp-block-embed__learn-more a {
   color: var(--wp-admin-theme-color);
 }

package/build-style/embed/editor.css

@@ -99,9 +99,6 @@
   word-break: break-word;
 }
 
-.wp-block-embed__learn-more {
-  margin-top: 1em;
-}
 .wp-block-post-content .wp-block-embed__learn-more a {
   color: var(--wp-admin-theme-color);
 }

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

@@ -135,50 +135,7 @@
   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-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;
-}
-
-.wp-block-group__placeholder .wp-block-group-placeholder__variations {
-  list-style: none;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-}
-.wp-block-group__placeholder .components-placeholder__instructions {
-  margin-bottom: 18px;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations svg {
-  fill: #ccc !important;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations svg:hover {
-  fill: var(--wp-admin-theme-color) !important;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations > li {
-  margin: 0 12px 12px 12px;
-  width: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button {
-  width: 44px;
-  height: 32px;
-  padding: 0;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button:hover {
-  box-shadow: none;
-}
-.wp-block-group__placeholder .components-placeholder {
-  min-height: auto;
-  padding: 24px;
-  align-items: center;
-}
-.wp-block-group__placeholder .is-small .wp-block-group-placeholder__variations > li,
-.wp-block-group__placeholder .is-medium .wp-block-group-placeholder__variations > li {
-  margin: 12px;
 }

package/build-style/group/editor.css

@@ -135,50 +135,7 @@
   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-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;
-}
-
-.wp-block-group__placeholder .wp-block-group-placeholder__variations {
-  list-style: none;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-}
-.wp-block-group__placeholder .components-placeholder__instructions {
-  margin-bottom: 18px;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations svg {
-  fill: #ccc !important;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations svg:hover {
-  fill: var(--wp-admin-theme-color) !important;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations > li {
-  margin: 0 12px 12px 12px;
-  width: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button {
-  width: 44px;
-  height: 32px;
-  padding: 0;
-}
-.wp-block-group__placeholder .wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button:hover {
-  box-shadow: none;
-}
-.wp-block-group__placeholder .components-placeholder {
-  min-height: auto;
-  padding: 24px;
-  align-items: center;
-}
-.wp-block-group__placeholder .is-small .wp-block-group-placeholder__variations > li,
-.wp-block-group__placeholder .is-medium .wp-block-group-placeholder__variations > li {
-  margin: 12px;
 }

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

@@ -88,4 +88,8 @@
  */
 .wp-block-group {
   box-sizing: border-box;
+}
+
+:where(.wp-block-group.wp-block-group-is-layout-constrained) {
+  position: relative;
 }

package/build-style/group/style.css

@@ -88,4 +88,8 @@
  */
 .wp-block-group {
   box-sizing: border-box;
+}
+
+:where(.wp-block-group.wp-block-group-is-layout-constrained) {
+  position: relative;
 }

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

@@ -200,6 +200,9 @@ figure.wp-block-image:not(.wp-block) {
   width: 100%;
   overflow: hidden;
 }
+.wp-block-image__crop-area .reactEasyCrop_Container {
+  pointer-events: auto;
+}
 .wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
   border: none;
   border-radius: 0;

package/build-style/image/editor.css

@@ -200,6 +200,9 @@ figure.wp-block-image:not(.wp-block) {
   width: 100%;
   overflow: hidden;
 }
+.wp-block-image__crop-area .reactEasyCrop_Container {
+  pointer-events: auto;
+}
 .wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
   border: none;
   border-radius: 0;

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

@@ -150,10 +150,9 @@
 }
 @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
   .wp-block-image.is-style-circle-mask img {
-    /* stylelint-disable */
+    /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
     -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
             mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
-    /* stylelint-enable */
     mask-mode: alpha;
     -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;

package/build-style/image/style.css

@@ -156,10 +156,9 @@
 }
 @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
   .wp-block-image.is-style-circle-mask img {
-    /* stylelint-disable */
+    /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
     -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
             mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
-    /* stylelint-enable */
     mask-mode: alpha;
     -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;

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

@@ -105,12 +105,4 @@
 .link-ui-block-inserter__back {
   margin-right: 8px;
   text-transform: uppercase;
-}
-
-.components-popover-pointer-events-trap {
-  z-index: 1000000;
-  position: fixed;
-  inset: 0;
-  background-color: transparent;
-  cursor: pointer;
 }

package/build-style/navigation-link/style.css

@@ -105,12 +105,4 @@
 .link-ui-block-inserter__back {
   margin-left: 8px;
   text-transform: uppercase;
-}
-
-.components-popover-pointer-events-trap {
-  z-index: 1000000;
-  position: fixed;
-  inset: 0;
-  background-color: transparent;
-  cursor: pointer;
 }

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

@@ -105,6 +105,7 @@
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button,
 .wp-block-post-featured-image .components-placeholder .components-button {
+  margin: auto;
   padding: 0;
   display: flex;
   justify-content: center;

package/build-style/post-featured-image/editor.css

@@ -105,6 +105,7 @@
 }
 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button,
 .wp-block-post-featured-image .components-placeholder .components-button {
+  margin: auto;
   padding: 0;
   display: flex;
   justify-content: center;

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

@@ -93,9 +93,6 @@
   list-style: none;
   padding: 0;
 }
-.wp-block-post-template.wp-block-post-template {
-  background: none;
-}
 .wp-block-post-template.is-flex-container {
   flex-direction: row;
   display: flex;

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

@@ -93,9 +93,6 @@
   list-style: none;
   padding: 0;
 }
-.wp-block-post-template.wp-block-post-template {
-  background: none;
-}
 .wp-block-post-template.is-flex-container {
   flex-direction: row;
   display: flex;

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

@@ -90,15 +90,6 @@
   display: inline;
 }
 
-.wp-block-rss__placeholder-form > * {
-  margin-bottom: 8px;
-}
-@media (min-width: 782px) {
-  .wp-block-rss__placeholder-form > * {
-    margin-bottom: 0;
-  }
-}
 .wp-block-rss__placeholder-form .wp-block-rss__placeholder-input {
-  flex: 1;
-  min-width: 80%;
+  flex: 1 1 auto;
 }

package/build-style/rss/editor.css

@@ -90,15 +90,6 @@
   display: inline;
 }
 
-.wp-block-rss__placeholder-form > * {
-  margin-bottom: 8px;
-}
-@media (min-width: 782px) {
-  .wp-block-rss__placeholder-form > * {
-    margin-bottom: 0;
-  }
-}
 .wp-block-rss__placeholder-form .wp-block-rss__placeholder-input {
-  flex: 1;
-  min-width: 80%;
+  flex: 1 1 auto;
 }

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

@@ -86,10 +86,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-[data-type="core/shortcode"].components-placeholder {
-  min-height: 0;
-}
-
 .blocks-shortcode__textarea {
   box-sizing: border-box;
   max-height: 250px;

package/build-style/shortcode/editor.css

@@ -86,10 +86,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-[data-type="core/shortcode"].components-placeholder {
-  min-height: 0;
-}
-
 .blocks-shortcode__textarea {
   box-sizing: border-box;
   max-height: 250px;

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

@@ -148,6 +148,7 @@
 }
 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button {
   padding: 0;
+  margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -148,6 +148,7 @@
 }
 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button {
   padding: 0;
+  margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;

package/build-style/social-link/editor-rtl.css

@@ -89,14 +89,25 @@
 .wp-block-social-links .wp-social-link {
   line-height: 0;
 }
-.wp-block-social-links .wp-social-link button {
+
+.wp-block-social-link-anchor {
+  align-items: center;
+  background: none;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
   font-size: inherit;
   color: currentColor;
   height: auto;
-  line-height: 0;
   opacity: 1;
   padding: 0.25em;
 }
+.wp-block-social-link-anchor:focus:not(:disabled) {
+  border-radius: 2px;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 3px solid transparent;
+}
 
 .wp-block-social-links.is-style-pill-shape .wp-social-link button {
   padding-right: calc((2/3) * 1em);

package/build-style/social-link/editor.css

@@ -89,14 +89,25 @@
 .wp-block-social-links .wp-social-link {
   line-height: 0;
 }
-.wp-block-social-links .wp-social-link button {
+
+.wp-block-social-link-anchor {
+  align-items: center;
+  background: none;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
   font-size: inherit;
   color: currentColor;
   height: auto;
-  line-height: 0;
   opacity: 1;
   padding: 0.25em;
 }
+.wp-block-social-link-anchor:focus:not(:disabled) {
+  border-radius: 2px;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 3px solid transparent;
+}
 
 .wp-block-social-links.is-style-pill-shape .wp-social-link button {
   padding-left: calc((2/3) * 1em);