@wordpress/block-library 9.6.1 → 9.7.1-next.5368f64a9.0

package/build-style/editor-rtl.css

@@ -144,12 +144,8 @@ div[data-type="core/button"] {
   display: table;
 }
 
-.editor-styles-wrapper .wp-block-button[style*=text-decoration] .wp-block-button__link {
-  text-decoration: inherit;
-}
-
 .wp-block-buttons {
-  /* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
+  /* stylelint-disable @stylistic/indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 }
 .wp-block-buttons > .wp-block {
   margin: 0;
@@ -171,7 +167,7 @@ div[data-type="core/button"] {
 .is-content-justification-right,
 .is-content-justification-left,
 .is-content-justification-center) .wp-block[data-align=center] {
-  /* stylelint-enable indentation */
+  /* stylelint-enable @stylistic/indentation */
   margin-right: auto;
   margin-left: auto;
   margin-top: 0;
@@ -183,9 +179,6 @@ div[data-type="core/button"] {
 .is-content-justification-center) .wp-block[data-align=center] .wp-block-button {
   margin-bottom: 0;
 }
-.editor-styles-wrapper .wp-block-buttons.has-custom-font-size .wp-block-button__link {
-  font-size: inherit;
-}
 
 .wp-block[data-align=center] > .wp-block-buttons {
   align-items: center;
@@ -366,10 +359,10 @@ html :where(.wp-block-column) {
   justify-content: center;
 }
 
-.editor-styles-wrapper .wp-block-comments-pagination {
+:where(.editor-styles-wrapper) .wp-block-comments-pagination {
   max-width: 100%;
 }
-.editor-styles-wrapper .wp-block-comments-pagination.block-editor-block-list__layout {
+:where(.editor-styles-wrapper) .wp-block-comments-pagination.block-editor-block-list__layout {
   margin: 0;
 }
 
@@ -401,12 +394,6 @@ html :where(.wp-block-column) {
   padding: inherit;
 }
 
-.wp-block-cover {
-  /* Extra specificity needed because the reset.css applied in the editor context is overriding this rule. */
-}
-.editor-styles-wrapper .wp-block-cover {
-  box-sizing: border-box;
-}
 .wp-block-cover.is-placeholder {
   padding: 0 !important;
   display: flex;
@@ -1181,7 +1168,6 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
   pointer-events: none;
   min-height: 46px;
   border: 1px dashed currentColor;
-  border-radius: 2px;
 }
 .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 {
@@ -1219,33 +1205,8 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
   outline: 2px solid transparent !important;
 }
 
-.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;
-  border: none;
-  filter: none !important;
-  border-radius: 2px;
-}
-.wp-block-image.wp-block-image.is-selected .block-editor-media-placeholder > svg {
-  opacity: 0;
-}
-.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 .block-editor-media-placeholder::before {
-  opacity: 0;
-}
-.wp-block-image.wp-block-image .block-bindings-media-placeholder-message {
-  opacity: 0;
-}
-.wp-block-image.wp-block-image.is-selected .block-bindings-media-placeholder-message {
-  opacity: 1;
-}
-.wp-block-image.wp-block-image .components-placeholder__label,
-.wp-block-image.wp-block-image .components-placeholder__instructions,
-.wp-block-image.wp-block-image .components-button {
-  transition: none;
+.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small {
+  min-height: 60px;
 }
 
 figure.wp-block-image:not(.wp-block) {
@@ -1339,6 +1300,10 @@ figure.wp-block-image:not(.wp-block) {
   text-align: center;
 }
 
+.wp-block[data-align]:has(> .wp-block-image) {
+  position: relative;
+}
+
 .wp-block-image__crop-area {
   position: relative;
   max-width: 100%;
@@ -1421,7 +1386,9 @@ figure.wp-block-image:not(.wp-block) {
 }
 
 .wp-block-media-text.is-image-fill .editor-media-container__resizer,
-.wp-block-media-text.is-image-fill .components-placeholder.has-illustration {
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration,
+.wp-block-media-text.is-image-fill-element .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration {
   height: 100% !important;
 }
 
@@ -1542,7 +1509,6 @@ figure.wp-block-image:not(.wp-block) {
   background: #1e1e1e;
   padding: 0;
   width: 24px;
-  border-radius: 2px;
   margin-left: 0;
   margin-right: auto;
 }
@@ -1881,7 +1847,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   width: 100%;
   background-color: #f0f0f0;
   padding: 0 24px;
-  height: 64px;
+  height: 64px !important;
   margin-bottom: 12px;
 }
 .wp-block-navigation__overlay-menu-preview.open {
@@ -2408,10 +2374,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   border: 1px dashed;
 }
 
-.editor-styles-wrapper :where(.wp-block-site-title a) {
-  color: inherit;
-}
-
 .wp-block-social-links .wp-social-link {
   line-height: 0;
 }
@@ -2531,6 +2493,23 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   opacity: 1;
 }
 
+.wp-block-social-links .block-list-appender {
+  position: static;
+}
+.wp-block-social-links .block-list-appender .block-editor-button-block-appender.components-button.components-button {
+  padding: 6px;
+}
+
+.wp-block-social-links.has-small-icon-size .block-editor-button-block-appender.components-button.components-button {
+  padding: 0;
+}
+.wp-block-social-links.has-large-icon-size .block-editor-button-block-appender.components-button.components-button {
+  padding: 14px;
+}
+.wp-block-social-links.has-huge-icon-size .block-editor-button-block-appender.components-button.components-button {
+  padding: 23px;
+}
+
 .block-editor-block-list__block[data-type="core/spacer"]::before {
   content: "";
   display: block;
@@ -2677,28 +2656,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   outline: 1px solid #ddd;
 }
 
-.wp-block-video.wp-block-video.is-selected .components-placeholder {
-  color: #1e1e1e;
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-  border: none;
-  border-radius: 2px;
-}
-.wp-block-video.wp-block-video.is-selected .components-placeholder > svg {
-  opacity: 0;
-}
-.wp-block-video.wp-block-video.is-selected .components-placeholder .components-placeholder__illustration {
-  display: none;
-}
-.wp-block-video.wp-block-video.is-selected .components-placeholder::before {
-  opacity: 0;
-}
-.wp-block-video.wp-block-video .components-placeholder__label,
-.wp-block-video.wp-block-video .components-placeholder__instructions,
-.wp-block-video.wp-block-video .components-button {
-  transition: none;
-}
-
 .wp-block[data-align=center] > .wp-block-video {
   text-align: center;
 }
@@ -2744,7 +2701,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 
 .block-library-video-tracks-editor > .components-popover__content {
   width: 360px;
-  padding: 0;
 }
 
 .block-library-video-tracks-editor__track-list .components-menu-group__label,
@@ -2752,12 +2708,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   padding: 0;
 }
 
-.block-library-video-tracks-editor__single-track-editor,
-.block-library-video-tracks-editor__track-list,
-.block-library-video-tracks-editor__add-tracks-container {
-  padding: 12px;
-}
-
 .editor-styles-wrapper ul.wp-block-post-template {
   padding-right: 0;
   margin-right: 0;
@@ -2823,27 +2773,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   justify-content: center;
 }
 
-.editor-styles-wrapper .wp-block-query-pagination {
+:where(.editor-styles-wrapper) .wp-block-query-pagination {
   max-width: 100%;
 }
-.editor-styles-wrapper .wp-block-query-pagination.block-editor-block-list__layout {
+:where(.editor-styles-wrapper) .wp-block-query-pagination.block-editor-block-list__layout {
   margin: 0;
 }
 
-.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 {
-  margin-right: 0;
-  margin-top: 0.5em;
-  margin-right: 0.5em;
-  margin-bottom: 0.5em;
-}
-.wp-block-query-pagination > .wp-block-query-pagination-next:last-child,
-.wp-block-query-pagination > .wp-block-query-pagination-previous:last-child,
-.wp-block-query-pagination > .wp-block-query-pagination-numbers:last-child {
-  margin-right: 0;
-}
-
 .wp-block-query-pagination-numbers a {
   text-decoration: underline;
 }
@@ -2998,8 +2934,8 @@ div[data-type="core/post-featured-image"] img {
 }
 
 :root .editor-styles-wrapper {
-  /* stylelint-disable function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
-  /* stylelint-enable function-comma-space-after */
+  /* stylelint-disable @stylistic/function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
+  /* stylelint-enable @stylistic/function-comma-space-after */
 }
 :root .editor-styles-wrapper .has-very-light-gray-background-color {
   background-color: #eee;

package/build-style/editor.css

@@ -145,12 +145,8 @@ div[data-type="core/button"] {
   display: table;
 }
 
-.editor-styles-wrapper .wp-block-button[style*=text-decoration] .wp-block-button__link {
-  text-decoration: inherit;
-}
-
 .wp-block-buttons {
-  /* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
+  /* stylelint-disable @stylistic/indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 }
 .wp-block-buttons > .wp-block {
   margin: 0;
@@ -172,7 +168,7 @@ div[data-type="core/button"] {
 .is-content-justification-right,
 .is-content-justification-left,
 .is-content-justification-center) .wp-block[data-align=center] {
-  /* stylelint-enable indentation */
+  /* stylelint-enable @stylistic/indentation */
   margin-left: auto;
   margin-right: auto;
   margin-top: 0;
@@ -184,9 +180,6 @@ div[data-type="core/button"] {
 .is-content-justification-center) .wp-block[data-align=center] .wp-block-button {
   margin-bottom: 0;
 }
-.editor-styles-wrapper .wp-block-buttons.has-custom-font-size .wp-block-button__link {
-  font-size: inherit;
-}
 
 .wp-block[data-align=center] > .wp-block-buttons {
   align-items: center;
@@ -367,10 +360,10 @@ html :where(.wp-block-column) {
   justify-content: center;
 }
 
-.editor-styles-wrapper .wp-block-comments-pagination {
+:where(.editor-styles-wrapper) .wp-block-comments-pagination {
   max-width: 100%;
 }
-.editor-styles-wrapper .wp-block-comments-pagination.block-editor-block-list__layout {
+:where(.editor-styles-wrapper) .wp-block-comments-pagination.block-editor-block-list__layout {
   margin: 0;
 }
 
@@ -405,12 +398,6 @@ html :where(.wp-block-column) {
   padding: inherit;
 }
 
-.wp-block-cover {
-  /* Extra specificity needed because the reset.css applied in the editor context is overriding this rule. */
-}
-.editor-styles-wrapper .wp-block-cover {
-  box-sizing: border-box;
-}
 .wp-block-cover.is-placeholder {
   padding: 0 !important;
   display: flex;
@@ -1189,7 +1176,6 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
   pointer-events: none;
   min-height: 46px;
   border: 1px dashed currentColor;
-  border-radius: 2px;
 }
 .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 {
@@ -1228,33 +1214,8 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
   outline: 2px solid transparent !important;
 }
 
-.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;
-  border: none;
-  filter: none !important;
-  border-radius: 2px;
-}
-.wp-block-image.wp-block-image.is-selected .block-editor-media-placeholder > svg {
-  opacity: 0;
-}
-.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 .block-editor-media-placeholder::before {
-  opacity: 0;
-}
-.wp-block-image.wp-block-image .block-bindings-media-placeholder-message {
-  opacity: 0;
-}
-.wp-block-image.wp-block-image.is-selected .block-bindings-media-placeholder-message {
-  opacity: 1;
-}
-.wp-block-image.wp-block-image .components-placeholder__label,
-.wp-block-image.wp-block-image .components-placeholder__instructions,
-.wp-block-image.wp-block-image .components-button {
-  transition: none;
+.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small {
+  min-height: 60px;
 }
 
 figure.wp-block-image:not(.wp-block) {
@@ -1348,6 +1309,10 @@ figure.wp-block-image:not(.wp-block) {
   text-align: center;
 }
 
+.wp-block[data-align]:has(> .wp-block-image) {
+  position: relative;
+}
+
 .wp-block-image__crop-area {
   position: relative;
   max-width: 100%;
@@ -1430,7 +1395,9 @@ figure.wp-block-image:not(.wp-block) {
 }
 
 .wp-block-media-text.is-image-fill .editor-media-container__resizer,
-.wp-block-media-text.is-image-fill .components-placeholder.has-illustration {
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration,
+.wp-block-media-text.is-image-fill-element .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration {
   height: 100% !important;
 }
 
@@ -1551,7 +1518,6 @@ figure.wp-block-image:not(.wp-block) {
   background: #1e1e1e;
   padding: 0;
   width: 24px;
-  border-radius: 2px;
   margin-right: 0;
   margin-left: auto;
 }
@@ -1890,7 +1856,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   width: 100%;
   background-color: #f0f0f0;
   padding: 0 24px;
-  height: 64px;
+  height: 64px !important;
   margin-bottom: 12px;
 }
 .wp-block-navigation__overlay-menu-preview.open {
@@ -2417,10 +2383,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   border: 1px dashed;
 }
 
-.editor-styles-wrapper :where(.wp-block-site-title a) {
-  color: inherit;
-}
-
 .wp-block-social-links .wp-social-link {
   line-height: 0;
 }
@@ -2540,6 +2502,23 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   opacity: 1;
 }
 
+.wp-block-social-links .block-list-appender {
+  position: static;
+}
+.wp-block-social-links .block-list-appender .block-editor-button-block-appender.components-button.components-button {
+  padding: 6px;
+}
+
+.wp-block-social-links.has-small-icon-size .block-editor-button-block-appender.components-button.components-button {
+  padding: 0;
+}
+.wp-block-social-links.has-large-icon-size .block-editor-button-block-appender.components-button.components-button {
+  padding: 14px;
+}
+.wp-block-social-links.has-huge-icon-size .block-editor-button-block-appender.components-button.components-button {
+  padding: 23px;
+}
+
 .block-editor-block-list__block[data-type="core/spacer"]::before {
   content: "";
   display: block;
@@ -2686,28 +2665,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   outline: 1px solid #ddd;
 }
 
-.wp-block-video.wp-block-video.is-selected .components-placeholder {
-  color: #1e1e1e;
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-  border: none;
-  border-radius: 2px;
-}
-.wp-block-video.wp-block-video.is-selected .components-placeholder > svg {
-  opacity: 0;
-}
-.wp-block-video.wp-block-video.is-selected .components-placeholder .components-placeholder__illustration {
-  display: none;
-}
-.wp-block-video.wp-block-video.is-selected .components-placeholder::before {
-  opacity: 0;
-}
-.wp-block-video.wp-block-video .components-placeholder__label,
-.wp-block-video.wp-block-video .components-placeholder__instructions,
-.wp-block-video.wp-block-video .components-button {
-  transition: none;
-}
-
 .wp-block[data-align=center] > .wp-block-video {
   text-align: center;
 }
@@ -2753,7 +2710,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 
 .block-library-video-tracks-editor > .components-popover__content {
   width: 360px;
-  padding: 0;
 }
 
 .block-library-video-tracks-editor__track-list .components-menu-group__label,
@@ -2761,12 +2717,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   padding: 0;
 }
 
-.block-library-video-tracks-editor__single-track-editor,
-.block-library-video-tracks-editor__track-list,
-.block-library-video-tracks-editor__add-tracks-container {
-  padding: 12px;
-}
-
 .editor-styles-wrapper ul.wp-block-post-template {
   padding-left: 0;
   margin-left: 0;
@@ -2832,29 +2782,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   justify-content: center;
 }
 
-.editor-styles-wrapper .wp-block-query-pagination {
+:where(.editor-styles-wrapper) .wp-block-query-pagination {
   max-width: 100%;
 }
-.editor-styles-wrapper .wp-block-query-pagination.block-editor-block-list__layout {
+:where(.editor-styles-wrapper) .wp-block-query-pagination.block-editor-block-list__layout {
   margin: 0;
 }
 
-.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 {
-  margin-left: 0;
-  margin-top: 0.5em;
-  /*rtl:ignore*/
-  margin-right: 0.5em;
-  margin-bottom: 0.5em;
-}
-.wp-block-query-pagination > .wp-block-query-pagination-next:last-child,
-.wp-block-query-pagination > .wp-block-query-pagination-previous:last-child,
-.wp-block-query-pagination > .wp-block-query-pagination-numbers:last-child {
-  /*rtl:ignore*/
-  margin-right: 0;
-}
-
 .wp-block-query-pagination-numbers a {
   text-decoration: underline;
 }
@@ -3010,8 +2944,8 @@ div[data-type="core/post-featured-image"] img {
 }
 
 :root .editor-styles-wrapper {
-  /* stylelint-disable function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
-  /* stylelint-enable function-comma-space-after */
+  /* stylelint-disable @stylistic/function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
+  /* stylelint-enable @stylistic/function-comma-space-after */
 }
 :root .editor-styles-wrapper .has-very-light-gray-background-color {
   background-color: #eee;

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

@@ -125,7 +125,6 @@
   pointer-events: none;
   min-height: 46px;
   border: 1px dashed currentColor;
-  border-radius: 2px;
 }
 .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 {

package/build-style/group/editor.css

@@ -125,7 +125,6 @@
   pointer-events: none;
   min-height: 46px;
   border: 1px dashed currentColor;
-  border-radius: 2px;
 }
 .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 {

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

@@ -89,33 +89,8 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.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;
-  border: none;
-  filter: none !important;
-  border-radius: 2px;
-}
-.wp-block-image.wp-block-image.is-selected .block-editor-media-placeholder > svg {
-  opacity: 0;
-}
-.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 .block-editor-media-placeholder::before {
-  opacity: 0;
-}
-.wp-block-image.wp-block-image .block-bindings-media-placeholder-message {
-  opacity: 0;
-}
-.wp-block-image.wp-block-image.is-selected .block-bindings-media-placeholder-message {
-  opacity: 1;
-}
-.wp-block-image.wp-block-image .components-placeholder__label,
-.wp-block-image.wp-block-image .components-placeholder__instructions,
-.wp-block-image.wp-block-image .components-button {
-  transition: none;
+.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small {
+  min-height: 60px;
 }
 
 figure.wp-block-image:not(.wp-block) {
@@ -209,6 +184,10 @@ figure.wp-block-image:not(.wp-block) {
   text-align: center;
 }
 
+.wp-block[data-align]:has(> .wp-block-image) {
+  position: relative;
+}
+
 .wp-block-image__crop-area {
   position: relative;
   max-width: 100%;

package/build-style/image/editor.css

@@ -89,33 +89,8 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.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;
-  border: none;
-  filter: none !important;
-  border-radius: 2px;
-}
-.wp-block-image.wp-block-image.is-selected .block-editor-media-placeholder > svg {
-  opacity: 0;
-}
-.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 .block-editor-media-placeholder::before {
-  opacity: 0;
-}
-.wp-block-image.wp-block-image .block-bindings-media-placeholder-message {
-  opacity: 0;
-}
-.wp-block-image.wp-block-image.is-selected .block-bindings-media-placeholder-message {
-  opacity: 1;
-}
-.wp-block-image.wp-block-image .components-placeholder__label,
-.wp-block-image.wp-block-image .components-placeholder__instructions,
-.wp-block-image.wp-block-image .components-button {
-  transition: none;
+.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small {
+  min-height: 60px;
 }
 
 figure.wp-block-image:not(.wp-block) {
@@ -209,6 +184,10 @@ figure.wp-block-image:not(.wp-block) {
   text-align: center;
 }
 
+.wp-block[data-align]:has(> .wp-block-image) {
+  position: relative;
+}
+
 .wp-block-image__crop-area {
   position: relative;
   max-width: 100%;

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

@@ -113,7 +113,9 @@
 }
 
 .wp-block-media-text.is-image-fill .editor-media-container__resizer,
-.wp-block-media-text.is-image-fill .components-placeholder.has-illustration {
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration,
+.wp-block-media-text.is-image-fill-element .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration {
   height: 100% !important;
 }
 

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

@@ -113,7 +113,9 @@
 }
 
 .wp-block-media-text.is-image-fill .editor-media-container__resizer,
-.wp-block-media-text.is-image-fill .components-placeholder.has-illustration {
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration,
+.wp-block-media-text.is-image-fill-element .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration {
   height: 100% !important;
 }
 

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

@@ -153,6 +153,7 @@
   vertical-align: middle;
 }
 
+/* `is-image-fill` is deprecated and the styles are kept for backwards compatibility. */
 .wp-block-media-text.is-image-fill > .wp-block-media-text__media {
   height: 100%;
   min-height: 250px;
@@ -175,6 +176,25 @@
   border: 0;
 }
 
+/* Image fill for versions 8 and onwards */
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
+  position: relative;
+  height: 100%;
+  min-height: 250px;
+}
+
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a {
+  display: block;
+  height: 100%;
+}
+
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 /*
 * Here we here not able to use a mobile first CSS approach.
 * Custom widths are set using inline styles, and on mobile,