Block Editor: Bug fixes targeted for WordPress 5.3 RC4.

The list of included fixes is: WordPress/gutenberg#18183 WordPress/gutenberg#18194 WordPress/gutenberg#18230 WordPress/gutenberg#18275 WordPress/gutenberg#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
sikc8000 · Nov 5, 2019 · b730723 · b730723
1 parent 339df8c
commit b730723
Show file tree

Hide file tree

Showing 28 changed files with 289 additions and 157 deletions.
diff --git a/wp-includes/css/dist/block-editor/style-rtl.css b/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.
  */

diff --git a/wp-includes/css/dist/block-editor/style-rtl.min.css b/wp-includes/css/dist/block-editor/style-rtl.min.css
diff --git a/wp-includes/css/dist/block-editor/style.css b/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.
  */

diff --git a/wp-includes/css/dist/block-editor/style.min.css b/wp-includes/css/dist/block-editor/style.min.css
diff --git a/wp-includes/css/dist/block-library/editor-rtl.css b/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;

diff --git a/wp-includes/css/dist/block-library/editor-rtl.min.css b/wp-includes/css/dist/block-library/editor-rtl.min.css
diff --git a/wp-includes/css/dist/block-library/editor.css b/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;

diff --git a/wp-includes/css/dist/block-library/editor.min.css b/wp-includes/css/dist/block-library/editor.min.css
diff --git a/wp-includes/css/dist/block-library/style-rtl.css b/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%; }
diff --git a/wp-includes/css/dist/block-library/style-rtl.min.css b/wp-includes/css/dist/block-library/style-rtl.min.css
diff --git a/wp-includes/css/dist/block-library/style.css b/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%; }
diff --git a/wp-includes/css/dist/block-library/style.min.css b/wp-includes/css/dist/block-library/style.min.css