Block Editor: Bug fixes targeted for WordPress 5.3 RC4.

The list of included fixes is:

https://github.com/WordPress/gutenberg/pull/18183
https://github.com/WordPress/gutenberg/pull/18194
https://github.com/WordPress/gutenberg/pull/18230
https://github.com/WordPress/gutenberg/pull/18275
https://github.com/WordPress/gutenberg/pull/18287

Updated packages:
 - @wordpress/block-editor@3.2.4
 - @wordpress/block-library@2.9.5
 - @wordpress/edit-post@3.8.5
 - @wordpress/editor@9.7.5
 - @wordpress/format-library@1.9.4

Props @aduth, @mcsf, @youknowriad, @johnbillion.
Fixes #48502.
Built from https://develop.svn.wordpress.org/trunk@46656


git-svn-id: http://core.svn.wordpress.org/trunk@46456 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/dist/block-editor/style-rtl.css

@@ -527,23 +527,6 @@
 .block-editor-block-list__block.is-multi-selected > .block-editor-block-mover {
   right: -30px; }
 
-.block-editor-block-list__block[data-align="left"].is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover, .block-editor-block-list__block[data-align="right"].is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover {
-  display: none; }
-  @media (min-width: 600px) {
-    .block-editor-block-list__block[data-align="left"].is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover, .block-editor-block-list__block[data-align="right"].is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover {
-      display: block;
-      opacity: 1;
-      animation: none;
-      width: 45px;
-      height: auto;
-      padding-bottom: 14px;
-      margin-top: 0; } }
-
-.block-editor-block-list__block[data-align="left"].is-hovered > .block-editor-block-list__block-edit > .block-editor-block-mover,
-.block-editor-block-list__block[data-align="left"].is-dragging > .block-editor-block-list__block-edit > .block-editor-block-mover, .block-editor-block-list__block[data-align="right"].is-hovered > .block-editor-block-list__block-edit > .block-editor-block-mover,
-.block-editor-block-list__block[data-align="right"].is-dragging > .block-editor-block-list__block-edit > .block-editor-block-mover {
-  display: none; }
-
 /**
  * Mobile unified toolbar.
  */

wp-includes/css/dist/block-editor/style.css

@@ -539,23 +539,6 @@
 .block-editor-block-list__block.is-multi-selected > .block-editor-block-mover {
   left: -30px; }
 
-.block-editor-block-list__block[data-align="left"].is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover, .block-editor-block-list__block[data-align="right"].is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover {
-  display: none; }
-  @media (min-width: 600px) {
-    .block-editor-block-list__block[data-align="left"].is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover, .block-editor-block-list__block[data-align="right"].is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover {
-      display: block;
-      opacity: 1;
-      animation: none;
-      width: 45px;
-      height: auto;
-      padding-bottom: 14px;
-      margin-top: 0; } }
-
-.block-editor-block-list__block[data-align="left"].is-hovered > .block-editor-block-list__block-edit > .block-editor-block-mover,
-.block-editor-block-list__block[data-align="left"].is-dragging > .block-editor-block-list__block-edit > .block-editor-block-mover, .block-editor-block-list__block[data-align="right"].is-hovered > .block-editor-block-list__block-edit > .block-editor-block-mover,
-.block-editor-block-list__block[data-align="right"].is-dragging > .block-editor-block-list__block-edit > .block-editor-block-mover {
-  display: none; }
-
 /**
  * Mobile unified toolbar.
  */

wp-includes/css/dist/block-library/editor-rtl.css

@@ -180,7 +180,7 @@ div[data-type="core/button"] div[data-block] {
       display: flex;
       flex-direction: column;
       flex: 1 1 auto; }
-      @supports (position: sticky) {
+      @supports ((position: -webkit-sticky) or (position: sticky)) {
         .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"],
         .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit,
         .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit > div[data-block],
@@ -600,6 +600,7 @@ div[data-type="core/freeform"].is-selected .block-library-rich-text__tinymce::af
   display: none;
   width: auto;
   margin: 0 -14px;
+  position: -webkit-sticky;
   position: sticky;
   z-index: 10;
   top: 14px;
@@ -697,7 +698,7 @@ body.admin-color-light .blocks-gallery-item figure.is-selected {
   max-height: 100%;
   overflow-y: auto; }
 
-@supports (position: sticky) {
+@supports ((position: -webkit-sticky) or (position: sticky)) {
   .blocks-gallery-item .is-selected .block-editor-rich-text {
     left: 0;
     right: 0;
@@ -1134,6 +1135,7 @@ figure.block-library-media-text__media-container {
 .wp-block-navigation-menu {
   display: -ms-grid;
   display: grid;
+  grid-auto-columns: -webkit-min-content;
   grid-auto-columns: min-content;
   grid-auto-flow: column;
   align-items: center;
@@ -1146,6 +1148,7 @@ figure.block-library-media-text__media-container {
 .wp-block-navigation-menu-item__edit-container {
   display: -ms-grid;
   display: grid;
+  grid-auto-columns: -webkit-min-content;
   grid-auto-columns: min-content;
   grid-auto-flow: column;
   align-items: center;

wp-includes/css/dist/block-library/editor.css

@@ -181,7 +181,7 @@ div[data-type="core/button"] div[data-block] {
       display: flex;
       flex-direction: column;
       flex: 1 1 auto; }
-      @supports (position: sticky) {
+      @supports ((position: -webkit-sticky) or (position: sticky)) {
         .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"],
         .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit,
         .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit > div[data-block],
@@ -605,6 +605,7 @@ div[data-type="core/freeform"].is-selected .block-library-rich-text__tinymce::af
   display: none;
   width: auto;
   margin: 0 -14px;
+  position: -webkit-sticky;
   position: sticky;
   z-index: 10;
   top: 14px;
@@ -702,7 +703,7 @@ body.admin-color-light .blocks-gallery-item figure.is-selected {
   max-height: 100%;
   overflow-y: auto; }
 
-@supports (position: sticky) {
+@supports ((position: -webkit-sticky) or (position: sticky)) {
   .blocks-gallery-item .is-selected .block-editor-rich-text {
     right: 0;
     left: 0;
@@ -1139,6 +1140,7 @@ figure.block-library-media-text__media-container {
 .wp-block-navigation-menu {
   display: -ms-grid;
   display: grid;
+  grid-auto-columns: -webkit-min-content;
   grid-auto-columns: min-content;
   grid-auto-flow: column;
   align-items: center;
@@ -1151,6 +1153,7 @@ figure.block-library-media-text__media-container {
 .wp-block-navigation-menu-item__edit-container {
   display: -ms-grid;
   display: grid;
+  grid-auto-columns: -webkit-min-content;
   grid-auto-columns: min-content;
   grid-auto-flow: column;
   align-items: center;

wp-includes/css/dist/block-library/style-rtl.css

@@ -38,6 +38,10 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.wp-block-audio figcaption {
+  margin-top: 0.5em;
+  margin-bottom: 1em; }
+
 .wp-block-audio audio {
   width: 100%;
   min-width: 300px; }
@@ -234,7 +238,7 @@
     content: "";
     font-size: 0;
     min-height: inherit; }
-    @supports (position: sticky) {
+    @supports ((position: -webkit-sticky) or (position: sticky)) {
       .wp-block-cover-image::after,
       .wp-block-cover::after {
         content: none; } }
@@ -335,6 +339,9 @@ section.wp-block-cover-image > h2,
 
 .wp-block-embed {
   margin-bottom: 1em; }
+  .wp-block-embed figcaption {
+    margin-top: 0.5em;
+    margin-bottom: 1em; }
 
 .wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper,
 .wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper,
@@ -435,7 +442,7 @@ section.wp-block-cover-image > h2,
     .blocks-gallery-grid .blocks-gallery-item figure {
       margin: 0;
       height: 100%; }
-      @supports (position: sticky) {
+      @supports ((position: -webkit-sticky) or (position: sticky)) {
         .wp-block-gallery .blocks-gallery-image figure,
         .wp-block-gallery .blocks-gallery-item figure,
         .blocks-gallery-grid .blocks-gallery-image figure,
@@ -455,7 +462,7 @@ section.wp-block-cover-image > h2,
     .blocks-gallery-grid .blocks-gallery-image img,
     .blocks-gallery-grid .blocks-gallery-item img {
       width: 100%; }
-      @supports (position: sticky) {
+      @supports ((position: -webkit-sticky) or (position: sticky)) {
         .wp-block-gallery .blocks-gallery-image img,
         .wp-block-gallery .blocks-gallery-item img,
         .blocks-gallery-grid .blocks-gallery-image img,
@@ -489,7 +496,7 @@ section.wp-block-cover-image > h2,
   .blocks-gallery-grid.is-cropped .blocks-gallery-item a,
   .blocks-gallery-grid.is-cropped .blocks-gallery-item img {
     width: 100%; }
-    @supports (position: sticky) {
+    @supports ((position: -webkit-sticky) or (position: sticky)) {
       .wp-block-gallery.is-cropped .blocks-gallery-image a,
       .wp-block-gallery.is-cropped .blocks-gallery-image img,
       .wp-block-gallery.is-cropped .blocks-gallery-item a,
@@ -675,18 +682,25 @@ section.wp-block-cover-image > h2,
   .wp-block-image .aligncenter {
     margin-right: auto;
     margin-left: auto; }
+  .wp-block-image figcaption {
+    margin-top: 0.5em;
+    margin-bottom: 1em; }
 
 .is-style-circle-mask img {
   border-radius: 9999px; }
-  @supports (mask-image: none) or (-webkit-mask-image: none) {
+  @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
     .is-style-circle-mask img {
       /* stylelint-disable */
-      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>');
+      -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;
-      mask-repeat: no-repeat;
-      mask-size: contain;
-      mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+              mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+              mask-size: contain;
+      -webkit-mask-position: center;
+              mask-position: center;
       border-radius: none; } }
 
 .wp-block-latest-comments__comment {
@@ -1401,12 +1415,15 @@ pre.wp-block-verse {
   margin-left: 0; }
   .wp-block-video video {
     max-width: 100%; }
-  @supports (position: sticky) {
+  @supports ((position: -webkit-sticky) or (position: sticky)) {
     .wp-block-video [poster] {
       -o-object-fit: cover;
          object-fit: cover; } }
   .wp-block-video.aligncenter {
     text-align: center; }
+  .wp-block-video figcaption {
+    margin-top: 0.5em;
+    margin-bottom: 1em; }
 
 :root .has-pale-pink-background-color {
   background-color: #f78da7; }
@@ -1505,19 +1522,3 @@ pre.wp-block-verse {
 
 .has-text-align-right {
   text-align: right; }
-
-/**
- * Vanilla Block Styles
- * These are base styles that apply across blocks, meant to provide a baseline.
- * They are applied both to the editor and the theme, so we should have as few of these as possible.
- * Please note that some styles are stored in packages/editor/src/editor-styles.scss, as they pertain to CSS bleed for the editor only.
- */
-figcaption {
-  margin-top: 0.5em; }
-
-img {
-  max-width: 100%;
-  height: auto; }
-
-iframe {
-  width: 100%; }

wp-includes/css/dist/block-library/style.css

@@ -38,6 +38,10 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.wp-block-audio figcaption {
+  margin-top: 0.5em;
+  margin-bottom: 1em; }
+
 .wp-block-audio audio {
   width: 100%;
   min-width: 300px; }
@@ -237,7 +241,7 @@
     content: "";
     font-size: 0;
     min-height: inherit; }
-    @supports (position: sticky) {
+    @supports ((position: -webkit-sticky) or (position: sticky)) {
       .wp-block-cover-image::after,
       .wp-block-cover::after {
         content: none; } }
@@ -338,6 +342,9 @@ section.wp-block-cover-image > h2,
 
 .wp-block-embed {
   margin-bottom: 1em; }
+  .wp-block-embed figcaption {
+    margin-top: 0.5em;
+    margin-bottom: 1em; }
 
 .wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper,
 .wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper,
@@ -439,7 +446,7 @@ section.wp-block-cover-image > h2,
     .blocks-gallery-grid .blocks-gallery-item figure {
       margin: 0;
       height: 100%; }
-      @supports (position: sticky) {
+      @supports ((position: -webkit-sticky) or (position: sticky)) {
         .wp-block-gallery .blocks-gallery-image figure,
         .wp-block-gallery .blocks-gallery-item figure,
         .blocks-gallery-grid .blocks-gallery-image figure,
@@ -459,7 +466,7 @@ section.wp-block-cover-image > h2,
     .blocks-gallery-grid .blocks-gallery-image img,
     .blocks-gallery-grid .blocks-gallery-item img {
       width: 100%; }
-      @supports (position: sticky) {
+      @supports ((position: -webkit-sticky) or (position: sticky)) {
         .wp-block-gallery .blocks-gallery-image img,
         .wp-block-gallery .blocks-gallery-item img,
         .blocks-gallery-grid .blocks-gallery-image img,
@@ -493,7 +500,7 @@ section.wp-block-cover-image > h2,
   .blocks-gallery-grid.is-cropped .blocks-gallery-item a,
   .blocks-gallery-grid.is-cropped .blocks-gallery-item img {
     width: 100%; }
-    @supports (position: sticky) {
+    @supports ((position: -webkit-sticky) or (position: sticky)) {
       .wp-block-gallery.is-cropped .blocks-gallery-image a,
       .wp-block-gallery.is-cropped .blocks-gallery-image img,
       .wp-block-gallery.is-cropped .blocks-gallery-item a,
@@ -683,18 +690,25 @@ section.wp-block-cover-image > h2,
   .wp-block-image .aligncenter {
     margin-left: auto;
     margin-right: auto; }
+  .wp-block-image figcaption {
+    margin-top: 0.5em;
+    margin-bottom: 1em; }
 
 .is-style-circle-mask img {
   border-radius: 9999px; }
-  @supports (mask-image: none) or (-webkit-mask-image: none) {
+  @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
     .is-style-circle-mask img {
       /* stylelint-disable */
-      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>');
+      -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;
-      mask-repeat: no-repeat;
-      mask-size: contain;
-      mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+              mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+              mask-size: contain;
+      -webkit-mask-position: center;
+              mask-position: center;
       border-radius: none; } }
 
 .wp-block-latest-comments__comment {
@@ -1413,12 +1427,15 @@ pre.wp-block-verse {
   margin-right: 0; }
   .wp-block-video video {
     max-width: 100%; }
-  @supports (position: sticky) {
+  @supports ((position: -webkit-sticky) or (position: sticky)) {
     .wp-block-video [poster] {
       -o-object-fit: cover;
          object-fit: cover; } }
   .wp-block-video.aligncenter {
     text-align: center; }
+  .wp-block-video figcaption {
+    margin-top: 0.5em;
+    margin-bottom: 1em; }
 
 :root .has-pale-pink-background-color {
   background-color: #f78da7; }
@@ -1519,19 +1536,3 @@ pre.wp-block-verse {
 .has-text-align-right {
   /*rtl:ignore*/
   text-align: right; }
-
-/**
- * Vanilla Block Styles
- * These are base styles that apply across blocks, meant to provide a baseline.
- * They are applied both to the editor and the theme, so we should have as few of these as possible.
- * Please note that some styles are stored in packages/editor/src/editor-styles.scss, as they pertain to CSS bleed for the editor only.
- */
-figcaption {
-  margin-top: 0.5em; }
-
-img {
-  max-width: 100%;
-  height: auto; }
-
-iframe {
-  width: 100%; }

wp-includes/css/dist/edit-post/style-rtl.css

@@ -82,6 +82,7 @@
     .edit-post-header {
       height: 56px;
       top: 0;
+      position: -webkit-sticky;
       position: sticky;
       flex-wrap: nowrap; } }
   @media (min-width: 600px) {
@@ -96,7 +97,7 @@
         top: 0; } }
   .edit-post-header > .edit-post-header__settings {
     order: 1; }
-    @supports (position: sticky) {
+    @supports ((position: -webkit-sticky) or (position: sticky)) {
       .edit-post-header > .edit-post-header__settings {
         order: initial; } }
 
@@ -438,7 +439,7 @@ body.is-fullscreen-mode .edit-post-layout__content .components-editor-notices__s
       overscroll-behavior-y: none; } }
   .edit-post-layout__content .edit-post-visual-editor {
     flex: 1 1 auto; }
-    @supports (position: sticky) {
+    @supports ((position: -webkit-sticky) or (position: sticky)) {
       .edit-post-layout__content .edit-post-visual-editor {
         flex-basis: 100%; } }
   .edit-post-layout__content .edit-post-layout__metaboxes {
@@ -577,6 +578,7 @@ body.is-fullscreen-mode .edit-post-layout__content .components-editor-notices__s
   margin: 0 0 2rem 0; }
 
 .edit-post-manage-blocks-modal__category-title {
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   padding: 16px 0;
@@ -686,15 +688,12 @@ body.is-fullscreen-mode .edit-post-layout__content .components-editor-notices__s
     z-index: 5; }
   .edit-post-meta-boxes-area .is-hidden {
     display: none; }
-  .edit-post-meta-boxes-area .postbox-container .postbox input[type="checkbox"],
-  .edit-post-meta-boxes-area .postbox-container .postbox input[type="radio"] {
+  .edit-post-meta-boxes-area .metabox-location-side .postbox input[type="checkbox"] {
     border: 1px solid #6c7781; }
-    .edit-post-meta-boxes-area .postbox-container .postbox input[type="checkbox"]:checked,
-    .edit-post-meta-boxes-area .postbox-container .postbox input[type="radio"]:checked {
+    .edit-post-meta-boxes-area .metabox-location-side .postbox input[type="checkbox"]:checked {
       background: #fff;
       border-color: #6c7781; }
-    .edit-post-meta-boxes-area .postbox-container .postbox input[type="checkbox"]::before,
-    .edit-post-meta-boxes-area .postbox-container .postbox input[type="radio"]::before {
+    .edit-post-meta-boxes-area .metabox-location-side .postbox input[type="checkbox"]::before {
       margin: -3px -4px; }
 
 .edit-post-meta-boxes-area__clear {
@@ -872,7 +871,7 @@ body.is-fullscreen-mode .edit-post-layout__content .components-editor-notices__s
 .editor-post-author__select {
   margin: -5px 0;
   width: 100%; }
-  @supports (position: sticky) {
+  @supports ((position: -webkit-sticky) or (position: sticky)) {
     .editor-post-author__select {
       width: auto; } }
 
@@ -941,6 +940,7 @@ body.is-fullscreen-mode .edit-post-layout__content .components-editor-notices__s
   padding-right: 0;
   padding-left: 4px;
   border-top: 0;
+  position: -webkit-sticky;
   position: sticky;
   z-index: -1;
   top: 0; }
@@ -2164,6 +2164,13 @@ body.block-editor-page {
     body.is-fullscreen-mode .block-editor__container {
       min-height: 100vh; } }
 
+.block-editor__container img {
+  max-width: 100%;
+  height: auto; }
+
+.block-editor__container iframe {
+  width: 100%; }
+
 .block-editor__container .components-navigate-regions {
   height: 100%; }
 

wp-includes/css/dist/edit-post/style.css

@@ -82,6 +82,7 @@
     .edit-post-header {
       height: 56px;
       top: 0;
+      position: -webkit-sticky;
       position: sticky;
       flex-wrap: nowrap; } }
   @media (min-width: 600px) {
@@ -96,7 +97,7 @@
         top: 0; } }
   .edit-post-header > .edit-post-header__settings {
     order: 1; }
-    @supports (position: sticky) {
+    @supports ((position: -webkit-sticky) or (position: sticky)) {
       .edit-post-header > .edit-post-header__settings {
         order: initial; } }
 
@@ -438,7 +439,7 @@ body.is-fullscreen-mode .edit-post-layout__content .components-editor-notices__s
       overscroll-behavior-y: none; } }
   .edit-post-layout__content .edit-post-visual-editor {
     flex: 1 1 auto; }
-    @supports (position: sticky) {
+    @supports ((position: -webkit-sticky) or (position: sticky)) {
       .edit-post-layout__content .edit-post-visual-editor {
         flex-basis: 100%; } }
   .edit-post-layout__content .edit-post-layout__metaboxes {
@@ -577,6 +578,7 @@ body.is-fullscreen-mode .edit-post-layout__content .components-editor-notices__s
   margin: 0 0 2rem 0; }
 
 .edit-post-manage-blocks-modal__category-title {
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   padding: 16px 0;
@@ -686,15 +688,12 @@ body.is-fullscreen-mode .edit-post-layout__content .components-editor-notices__s
     z-index: 5; }
   .edit-post-meta-boxes-area .is-hidden {
     display: none; }
-  .edit-post-meta-boxes-area .postbox-container .postbox input[type="checkbox"],
-  .edit-post-meta-boxes-area .postbox-container .postbox input[type="radio"] {
+  .edit-post-meta-boxes-area .metabox-location-side .postbox input[type="checkbox"] {
     border: 1px solid #6c7781; }
-    .edit-post-meta-boxes-area .postbox-container .postbox input[type="checkbox"]:checked,
-    .edit-post-meta-boxes-area .postbox-container .postbox input[type="radio"]:checked {
+    .edit-post-meta-boxes-area .metabox-location-side .postbox input[type="checkbox"]:checked {
       background: #fff;
       border-color: #6c7781; }
-    .edit-post-meta-boxes-area .postbox-container .postbox input[type="checkbox"]::before,
-    .edit-post-meta-boxes-area .postbox-container .postbox input[type="radio"]::before {
+    .edit-post-meta-boxes-area .metabox-location-side .postbox input[type="checkbox"]::before {
       margin: -3px -4px; }
 
 .edit-post-meta-boxes-area__clear {
@@ -872,7 +871,7 @@ body.is-fullscreen-mode .edit-post-layout__content .components-editor-notices__s
 .editor-post-author__select {
   margin: -5px 0;
   width: 100%; }
-  @supports (position: sticky) {
+  @supports ((position: -webkit-sticky) or (position: sticky)) {
     .editor-post-author__select {
       width: auto; } }
 
@@ -945,6 +944,7 @@ body.is-fullscreen-mode .edit-post-layout__content .components-editor-notices__s
   padding-left: 0;
   padding-right: 4px;
   border-top: 0;
+  position: -webkit-sticky;
   position: sticky;
   z-index: -1;
   top: 0; }
@@ -2168,6 +2168,13 @@ body.block-editor-page {
     body.is-fullscreen-mode .block-editor__container {
       min-height: 100vh; } }
 
+.block-editor__container img {
+  max-width: 100%;
+  height: auto; }
+
+.block-editor__container iframe {
+  width: 100%; }
+
 .block-editor__container .components-navigate-regions {
   height: 100%; }
 

wp-includes/css/dist/editor/style-rtl.css

@@ -128,6 +128,7 @@
   padding: 1px 0; }
 
 .components-editor-notices__dismissible {
+  position: -webkit-sticky;
   position: sticky;
   top: 56px;
   left: 0;
@@ -378,6 +379,8 @@
   display: block;
   position: absolute;
   -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   pointer-events: none;

wp-includes/css/dist/editor/style.css

@@ -128,6 +128,7 @@
   padding: 1px 0; }
 
 .components-editor-notices__dismissible {
+  position: -webkit-sticky;
   position: sticky;
   top: 56px;
   right: 0;
@@ -380,6 +381,8 @@
   display: block;
   position: absolute;
   -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   pointer-events: none;

wp-includes/js/dist/block-library.js

@@ -15169,6 +15169,7 @@ var SOLID_COLOR_CLASS = "is-style-".concat(SOLID_COLOR_STYLE_NAME);
 
 
 
+
 /**
  * External dependencies
  */
@@ -15211,10 +15212,116 @@ var pullquote_deprecated_blockAttributes = {
     type: 'string'
   }
 };
+
+function parseBorderColor(styleString) {
+  if (!styleString) {
+    return;
+  }
+
+  var matches = styleString.match(/border-color:([^;]+)[;]?/);
+
+  if (matches && matches[1]) {
+    return matches[1];
+  }
+}
+
 var pullquote_deprecated_deprecated = [{
-  attributes: pullquote_deprecated_blockAttributes,
+  attributes: Object(objectSpread["a" /* default */])({}, pullquote_deprecated_blockAttributes, {
+    // figureStyle is an attribute that never existed.
+    // We are using it as a way to access the styles previously applied to the figure.
+    figureStyle: {
+      source: 'attribute',
+      selector: 'figure',
+      attribute: 'style'
+    }
+  }),
   save: function save(_ref) {
     var attributes = _ref.attributes;
+    var mainColor = attributes.mainColor,
+        customMainColor = attributes.customMainColor,
+        textColor = attributes.textColor,
+        customTextColor = attributes.customTextColor,
+        value = attributes.value,
+        citation = attributes.citation,
+        className = attributes.className,
+        figureStyle = attributes.figureStyle;
+    var isSolidColorStyle = Object(external_lodash_["includes"])(className, SOLID_COLOR_CLASS);
+    var figureClasses, figureStyles; // Is solid color style
+
+    if (isSolidColorStyle) {
+      var backgroundClass = Object(external_this_wp_blockEditor_["getColorClassName"])('background-color', mainColor);
+      figureClasses = classnames_default()(Object(defineProperty["a" /* default */])({
+        'has-background': backgroundClass || customMainColor
+      }, backgroundClass, backgroundClass));
+      figureStyles = {
+        backgroundColor: backgroundClass ? undefined : customMainColor
+      }; // Is normal style and a custom color is being used ( we can set a style directly with its value)
+    } else if (customMainColor) {
+      figureStyles = {
+        borderColor: customMainColor
+      }; // If normal style and a named color are being used, we need to retrieve the color value to set the style,
+      // as there is no expectation that themes create classes that set border colors.
+    } else if (mainColor) {
+      // Previously here we queried the color settings to know the color value
+      // of a named color. This made the save function impure and the block was refactored,
+      // because meanwhile a change in the editor made it impossible to query color settings in the save function.
+      // Here instead of querying the color settings to know the color value, we retrieve the value
+      // directly from the style previously serialized.
+      var borderColor = parseBorderColor(figureStyle);
+      figureStyles = {
+        borderColor: borderColor
+      };
+    }
+
+    var blockquoteTextColorClass = Object(external_this_wp_blockEditor_["getColorClassName"])('color', textColor);
+    var blockquoteClasses = (textColor || customTextColor) && classnames_default()('has-text-color', Object(defineProperty["a" /* default */])({}, blockquoteTextColorClass, blockquoteTextColorClass));
+    var blockquoteStyles = blockquoteTextColorClass ? undefined : {
+      color: customTextColor
+    };
+    return Object(external_this_wp_element_["createElement"])("figure", {
+      className: figureClasses,
+      style: figureStyles
+    }, Object(external_this_wp_element_["createElement"])("blockquote", {
+      className: blockquoteClasses,
+      style: blockquoteStyles
+    }, Object(external_this_wp_element_["createElement"])(external_this_wp_blockEditor_["RichText"].Content, {
+      value: value,
+      multiline: true
+    }), !external_this_wp_blockEditor_["RichText"].isEmpty(citation) && Object(external_this_wp_element_["createElement"])(external_this_wp_blockEditor_["RichText"].Content, {
+      tagName: "cite",
+      value: citation
+    })));
+  },
+  migrate: function migrate(_ref2) {
+    var className = _ref2.className,
+        figureStyle = _ref2.figureStyle,
+        mainColor = _ref2.mainColor,
+        attributes = Object(objectWithoutProperties["a" /* default */])(_ref2, ["className", "figureStyle", "mainColor"]);
+
+    var isSolidColorStyle = Object(external_lodash_["includes"])(className, SOLID_COLOR_CLASS); // If is the default style, and a main color is set,
+    // migrate the main color value into a custom color.
+    // The custom color value is retrived by parsing the figure styles.
+
+    if (!isSolidColorStyle && mainColor && figureStyle) {
+      var borderColor = parseBorderColor(figureStyle);
+
+      if (borderColor) {
+        return Object(objectSpread["a" /* default */])({}, attributes, {
+          className: className,
+          customMainColor: borderColor
+        });
+      }
+    }
+
+    return Object(objectSpread["a" /* default */])({
+      className: className,
+      mainColor: mainColor
+    }, attributes);
+  }
+}, {
+  attributes: pullquote_deprecated_blockAttributes,
+  save: function save(_ref3) {
+    var attributes = _ref3.attributes;
     var mainColor = attributes.mainColor,
         customMainColor = attributes.customMainColor,
         textColor = attributes.textColor,
@@ -15268,8 +15375,8 @@ var pullquote_deprecated_deprecated = [{
   }
 }, {
   attributes: Object(objectSpread["a" /* default */])({}, pullquote_deprecated_blockAttributes),
-  save: function save(_ref2) {
-    var attributes = _ref2.attributes;
+  save: function save(_ref4) {
+    var attributes = _ref4.attributes;
     var value = attributes.value,
         citation = attributes.citation;
     return Object(external_this_wp_element_["createElement"])("blockquote", null, Object(external_this_wp_element_["createElement"])(external_this_wp_blockEditor_["RichText"].Content, {
@@ -15292,8 +15399,8 @@ var pullquote_deprecated_deprecated = [{
       default: 'none'
     }
   }),
-  save: function save(_ref3) {
-    var attributes = _ref3.attributes;
+  save: function save(_ref5) {
+    var attributes = _ref5.attributes;
     var value = attributes.value,
         citation = attributes.citation,
         align = attributes.align;
@@ -15362,13 +15469,24 @@ function (_Component) {
       var _this$props = this.props,
           colorUtils = _this$props.colorUtils,
           textColor = _this$props.textColor,
+          setAttributes = _this$props.setAttributes,
           setTextColor = _this$props.setTextColor,
           setMainColor = _this$props.setMainColor,
           className = _this$props.className;
       var isSolidColorStyle = Object(external_lodash_["includes"])(className, SOLID_COLOR_CLASS);
       var needTextColor = !textColor.color || this.wasTextColorAutomaticallyComputed;
       var shouldSetTextColor = isSolidColorStyle && needTextColor && colorValue;
-      setMainColor(colorValue);
+
+      if (isSolidColorStyle) {
+        // If we use the solid color style, set the color using the normal mechanism.
+        setMainColor(colorValue);
+      } else {
+        // If we use the default style, set the color as a custom color to force the usage of an inline style.
+        // Default style uses a border color for which classes are not available.
+        setAttributes({
+          customMainColor: colorValue
+        });
+      }
 
       if (shouldSetTextColor) {
         this.wasTextColorAutomaticallyComputed = true;
@@ -15383,15 +15501,35 @@ function (_Component) {
       this.wasTextColorAutomaticallyComputed = false;
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
       var _this$props2 = this.props,
           attributes = _this$props2.attributes,
+          className = _this$props2.className,
           mainColor = _this$props2.mainColor,
-          textColor = _this$props2.textColor,
-          setAttributes = _this$props2.setAttributes,
-          isSelected = _this$props2.isSelected,
-          className = _this$props2.className;
+          setAttributes = _this$props2.setAttributes; // If the block includes a named color and we switched from the
+      // solid color style to the default style.
+
+      if (attributes.mainColor && !Object(external_lodash_["includes"])(className, SOLID_COLOR_CLASS) && Object(external_lodash_["includes"])(prevProps.className, SOLID_COLOR_CLASS)) {
+        // Remove the named color, and set the color as a custom color.
+        // This is done because named colors use classes, in the default style we use a border color,
+        // and themes don't set classes for border colors.
+        setAttributes({
+          mainColor: undefined,
+          customMainColor: mainColor.color
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          attributes = _this$props3.attributes,
+          mainColor = _this$props3.mainColor,
+          textColor = _this$props3.textColor,
+          setAttributes = _this$props3.setAttributes,
+          isSelected = _this$props3.isSelected,
+          className = _this$props3.className;
       var value = attributes.value,
           citation = attributes.citation;
       var isSolidColorStyle = Object(external_lodash_["includes"])(className, SOLID_COLOR_CLASS);
@@ -15497,7 +15635,6 @@ function (_Component) {
  */
 
 
-
 /**
  * Internal dependencies
  */
@@ -15526,13 +15663,6 @@ function pullquote_save_save(_ref) {
   } else if (customMainColor) {
     figureStyles = {
       borderColor: customMainColor
-    }; // If normal style and a named color are being used, we need to retrieve the color value to set the style,
-    // as there is no expectation that themes create classes that set border colors.
-  } else if (mainColor) {
-    var colors = Object(external_lodash_["get"])(Object(external_this_wp_data_["select"])('core/block-editor').getSettings(), ['colors'], []);
-    var colorObject = Object(external_this_wp_blockEditor_["getColorObjectByAttributeValues"])(colors, mainColor);
-    figureStyles = {
-      borderColor: colorObject.color
     };
   }
 

wp-includes/js/dist/edit-post.js

@@ -2234,10 +2234,12 @@ function (_Component) {
       var _this$props = this.props,
           postId = _this$props.postId,
           postStatus = _this$props.postStatus,
-          postType = _this$props.postType;
-      var historyId = this.state.historyId;
+          postType = _this$props.postType,
+          isSavingPost = _this$props.isSavingPost;
+      var historyId = this.state.historyId; // Posts are still dirty while saving so wait for saving to finish
+      // to avoid the unsaved changes warning when trashing posts.
 
-      if (postStatus === 'trash') {
+      if (postStatus === 'trash' && !isSavingPost) {
         this.setTrashURL(postId, postType);
         return;
       }
@@ -2291,7 +2293,8 @@ function (_Component) {
 }(external_this_wp_element_["Component"]);
 /* harmony default export */ var browser_url = (Object(external_this_wp_data_["withSelect"])(function (select) {
   var _select = select('core/editor'),
-      getCurrentPost = _select.getCurrentPost;
+      getCurrentPost = _select.getCurrentPost,
+      isSavingPost = _select.isSavingPost;
 
   var _getCurrentPost = getCurrentPost(),
       id = _getCurrentPost.id,
@@ -2301,7 +2304,8 @@ function (_Component) {
   return {
     postId: id,
     postStatus: status,
-    postType: type
+    postType: type,
+    isSavingPost: isSavingPost()
   };
 })(browser_url_BrowserURL));
 

wp-includes/js/dist/editor.js

@@ -12329,9 +12329,9 @@ function (_Component) {
   }, {
     key: "warnIfUnsavedChanges",
     value: function warnIfUnsavedChanges(event) {
-      var isDirty = this.props.isDirty;
+      var isEditedPostDirty = this.props.isEditedPostDirty;
 
-      if (isDirty) {
+      if (isEditedPostDirty()) {
         event.returnValue = Object(external_this_wp_i18n_["__"])('You have unsaved changes. If you proceed, they will be lost.');
         return event.returnValue;
       }
@@ -12348,7 +12348,11 @@ function (_Component) {
 
 /* harmony default export */ var unsaved_changes_warning = (Object(external_this_wp_data_["withSelect"])(function (select) {
   return {
-    isDirty: select('core/editor').isEditedPostDirty()
+    // We need to call the selector directly in the listener to avoid race
+    // conditions with `BrowserURL` where `componentDidUpdate` gets the
+    // new value of `isEditedPostDirty` before this component does,
+    // causing this component to incorrectly think a trashed post is still dirty.
+    isEditedPostDirty: select('core/editor').isEditedPostDirty
   };
 })(unsaved_changes_warning_UnsavedChangesWarning));
 

wp-includes/script-loader.php

@@ -229,8 +229,8 @@ function wp_default_packages_scripts( &$scripts ) {
 		'api-fetch'                          => '3.6.4',
 		'autop'                              => '2.5.1',
 		'blob'                               => '2.5.1',
-		'block-editor'                       => '3.2.3',
-		'block-library'                      => '2.9.4',
+		'block-editor'                       => '3.2.4',
+		'block-library'                      => '2.9.5',
 		'block-serialization-default-parser' => '3.4.1',
 		'blocks'                             => '6.7.2',
 		'components'                         => '8.3.2',
@@ -242,11 +242,11 @@ function wp_default_packages_scripts( &$scripts ) {
 		'deprecated'                         => '2.6.1',
 		'dom-ready'                          => '2.5.1',
 		'dom'                                => '2.5.2',
-		'edit-post'                          => '3.8.4',
-		'editor'                             => '9.7.4',
+		'edit-post'                          => '3.8.5',
+		'editor'                             => '9.7.5',
 		'element'                            => '2.8.2',
 		'escape-html'                        => '1.5.1',
-		'format-library'                     => '1.9.3',
+		'format-library'                     => '1.9.4',
 		'hooks'                              => '2.6.0',
 		'html-entities'                      => '2.5.0',
 		'i18n'                               => '3.6.1',

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.4-alpha-46654';
+$wp_version = '5.4-alpha-46656';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.