@wordpress/block-editor 7.0.3 → 7.0.4

package/build-module/utils/transform-styles/transforms/wrap.js

@@ -2,8 +2,24 @@
  * @constant string IS_ROOT_TAG Regex to check if the selector is a root tag selector.
  */
 const IS_ROOT_TAG = /^(body|html|:root).*$/;
+/**
+ * Creates a callback to modify selectors so they only apply within a certain
+ * namespace.
+ *
+ * @param {string}   namespace Namespace to prefix selectors with.
+ * @param {string[]} ignore    Selectors to not prefix.
+ *
+ * @return {(node: Object) => Object} Callback to wrap selectors.
+ */
 
 const wrap = (namespace, ignore = []) => node => {
+  /**
+   * Updates selector if necessary.
+   *
+   * @param {string} selector Selector to modify.
+   *
+   * @return {string} Updated selector.
+   */
   const updateSelector = selector => {
     if (ignore.includes(selector.trim())) {
       return selector;

package/build-module/utils/transform-styles/transforms/wrap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/utils/transform-styles/transforms/wrap.js"],"names":["IS_ROOT_TAG","wrap","namespace","ignore","node","updateSelector","selector","includes","trim","match","replace","type","selectors","map"],"mappings":"AAAA;AACA;AACA;AACA,MAAMA,WAAW,GAAG,uBAApB;;AAEA,MAAMC,IAAI,GAAG,CAAEC,SAAF,EAAaC,MAAM,GAAG,EAAtB,KAAgCC,IAAF,IAAY;AACtD,QAAMC,cAAc,GAAKC,QAAF,IAAgB;AACtC,QAAKH,MAAM,CAACI,QAAP,CAAiBD,QAAQ,CAACE,IAAT,EAAjB,CAAL,EAA0C;AACzC,aAAOF,QAAP;AACA,KAHqC,CAKtC;;;AACA;AACC,UAAK,CAAEA,QAAQ,CAACG,KAAT,CAAgBT,WAAhB,CAAP,EAAuC;AACtC,eAAOE,SAAS,GAAG,GAAZ,GAAkBI,QAAzB;AACA;AACD,KAVqC,CAYtC;;AACA,WAAOA,QAAQ,CAACI,OAAT,CAAkB,oBAAlB,EAAwCR,SAAxC,CAAP;AACA,GAdD;;AAgBA,MAAKE,IAAI,CAACO,IAAL,KAAc,MAAnB,EAA4B;AAC3B,WAAO,EACN,GAAGP,IADG;AAENQ,MAAAA,SAAS,EAAER,IAAI,CAACQ,SAAL,CAAeC,GAAf,CAAoBR,cAApB;AAFL,KAAP;AAIA;;AAED,SAAOD,IAAP;AACA,CAzBD;;AA2BA,eAAeH,IAAf","sourcesContent":["/**\n * @constant string IS_ROOT_TAG Regex to check if the selector is a root tag selector.\n */\nconst IS_ROOT_TAG = /^(body|html|:root).*$/;\n\nconst wrap = ( namespace, ignore = [] ) => ( node ) => {\n\tconst updateSelector = ( selector ) => {\n\t\tif ( ignore.includes( selector.trim() ) ) {\n\t\t\treturn selector;\n\t\t}\n\n\t\t// Anything other than a root tag is always prefixed.\n\t\t{\n\t\t\tif ( ! selector.match( IS_ROOT_TAG ) ) {\n\t\t\t\treturn namespace + ' ' + selector;\n\t\t\t}\n\t\t}\n\n\t\t// HTML and Body elements cannot be contained within our container so lets extract their styles.\n\t\treturn selector.replace( /^(body|html|:root)/, namespace );\n\t};\n\n\tif ( node.type === 'rule' ) {\n\t\treturn {\n\t\t\t...node,\n\t\t\tselectors: node.selectors.map( updateSelector ),\n\t\t};\n\t}\n\n\treturn node;\n};\n\nexport default wrap;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/utils/transform-styles/transforms/wrap.js"],"names":["IS_ROOT_TAG","wrap","namespace","ignore","node","updateSelector","selector","includes","trim","match","replace","type","selectors","map"],"mappings":"AAAA;AACA;AACA;AACA,MAAMA,WAAW,GAAG,uBAApB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,IAAI,GAAG,CAAEC,SAAF,EAAaC,MAAM,GAAG,EAAtB,KAAgCC,IAAF,IAAY;AACtD;AACD;AACA;AACA;AACA;AACA;AACA;AACC,QAAMC,cAAc,GAAKC,QAAF,IAAgB;AACtC,QAAKH,MAAM,CAACI,QAAP,CAAiBD,QAAQ,CAACE,IAAT,EAAjB,CAAL,EAA0C;AACzC,aAAOF,QAAP;AACA,KAHqC,CAKtC;;;AACA;AACC,UAAK,CAAEA,QAAQ,CAACG,KAAT,CAAgBT,WAAhB,CAAP,EAAuC;AACtC,eAAOE,SAAS,GAAG,GAAZ,GAAkBI,QAAzB;AACA;AACD,KAVqC,CAYtC;;AACA,WAAOA,QAAQ,CAACI,OAAT,CAAkB,oBAAlB,EAAwCR,SAAxC,CAAP;AACA,GAdD;;AAgBA,MAAKE,IAAI,CAACO,IAAL,KAAc,MAAnB,EAA4B;AAC3B,WAAO,EACN,GAAGP,IADG;AAENQ,MAAAA,SAAS,EAAER,IAAI,CAACQ,SAAL,CAAeC,GAAf,CAAoBR,cAApB;AAFL,KAAP;AAIA;;AAED,SAAOD,IAAP;AACA,CAhCD;;AAkCA,eAAeH,IAAf","sourcesContent":["/**\n * @constant string IS_ROOT_TAG Regex to check if the selector is a root tag selector.\n */\nconst IS_ROOT_TAG = /^(body|html|:root).*$/;\n\n/**\n * Creates a callback to modify selectors so they only apply within a certain\n * namespace.\n *\n * @param {string}   namespace Namespace to prefix selectors with.\n * @param {string[]} ignore    Selectors to not prefix.\n *\n * @return {(node: Object) => Object} Callback to wrap selectors.\n */\nconst wrap = ( namespace, ignore = [] ) => ( node ) => {\n\t/**\n\t * Updates selector if necessary.\n\t *\n\t * @param {string} selector Selector to modify.\n\t *\n\t * @return {string} Updated selector.\n\t */\n\tconst updateSelector = ( selector ) => {\n\t\tif ( ignore.includes( selector.trim() ) ) {\n\t\t\treturn selector;\n\t\t}\n\n\t\t// Anything other than a root tag is always prefixed.\n\t\t{\n\t\t\tif ( ! selector.match( IS_ROOT_TAG ) ) {\n\t\t\t\treturn namespace + ' ' + selector;\n\t\t\t}\n\t\t}\n\n\t\t// HTML and Body elements cannot be contained within our container so lets extract their styles.\n\t\treturn selector.replace( /^(body|html|:root)/, namespace );\n\t};\n\n\tif ( node.type === 'rule' ) {\n\t\treturn {\n\t\t\t...node,\n\t\t\tselectors: node.selectors.map( updateSelector ),\n\t\t};\n\t}\n\n\treturn node;\n};\n\nexport default wrap;\n"]}

package/build-style/style-rtl.css

@@ -495,26 +495,15 @@
 .block-editor-block-list__insertion-point-indicator {
   position: absolute;
   background: var(--wp-admin-theme-color);
-  animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-list__insertion-point-indicator {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
 }
 .block-editor-block-list__insertion-point.is-vertical > .block-editor-block-list__insertion-point-indicator {
   top: 50%;
-  left: 0;
-  right: 0;
   height: 1px;
 }
 .block-editor-block-list__insertion-point.is-horizontal > .block-editor-block-list__insertion-point-indicator {
   top: 0;
   left: 0;
   right: 50%;
-  height: 100%;
   width: 1px;
 }
 
@@ -566,30 +555,6 @@
   background: #1e1e1e;
 }
 
-.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button,
-.block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button {
-  animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button,
-.block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
-}
-
-@keyframes block-editor-inserter__toggle__fade-in-animation-delayed {
-  0% {
-    opacity: 0;
-  }
-  60% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 /**
  * Block Toolbar when contextual.
  */
@@ -1218,10 +1183,6 @@
   width: 100%;
   overflow: hidden;
 }
-.block-editor-block-preview__container.editor-styles-wrapper {
-  padding: 0;
-  margin: 0;
-}
 .block-editor-block-preview__container .block-editor-block-preview__content {
   top: 0;
   right: 0;
@@ -1237,14 +1198,6 @@
 .block-editor-block-preview__container .block-editor-block-preview__content .block-list-appender {
   display: none;
 }
-.block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container {
-  padding-right: 0;
-  padding-left: 0;
-}
-.block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container > .wp-block[data-align=full] {
-  margin-right: 0;
-  margin-left: 0;
-}
 
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
   padding: 0;
@@ -1813,10 +1766,6 @@
 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
   margin-bottom: 12px;
 }
-.block-editor-color-gradient-control .block-editor-color-gradient-control__button-tabs {
-  display: block;
-  margin-bottom: 12px;
-}
 
 .block-editor-panel-color-gradient-settings .component-color-indicator {
   vertical-align: text-bottom;
@@ -1838,6 +1787,9 @@
     margin-left: 0;
   }
 }
+.block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
+  margin-bottom: inherit;
+}
 
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
@@ -1908,10 +1860,10 @@
   margin-right: -14px;
 }
 
-.components-font-appearance-control__select {
+.components-font-appearance-control {
   margin-bottom: 24px;
 }
-.components-font-appearance-control__select ul li {
+.components-font-appearance-control ul li {
   color: #1e1e1e;
   text-transform: capitalize;
 }
@@ -2086,11 +2038,14 @@
   border: none;
   text-align: right;
   padding: 12px 16px;
-  border-radius: 5px;
+  border-radius: 2px;
   height: auto;
 }
 .block-editor-link-control__search-item:hover, .block-editor-link-control__search-item:focus {
-  background-color: #ddd;
+  background-color: #f0f0f0;
+}
+.block-editor-link-control__search-item:hover .block-editor-link-control__search-item-type, .block-editor-link-control__search-item:focus .block-editor-link-control__search-item-type {
+  background: #fff;
 }
 .block-editor-link-control__search-item:focus:not(:disabled) {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
@@ -2165,7 +2120,7 @@
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
   font-weight: 700;
-  color: #000;
+  color: inherit;
   background-color: transparent;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title span {
@@ -2186,7 +2141,7 @@
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-type {
   display: block;
-  padding: 3px 8px;
+  padding: 3px 6px;
   margin-right: auto;
   font-size: 0.9em;
   background-color: #f0f0f0;
@@ -2509,19 +2464,24 @@
 .block-editor-list-view-leaf {
   position: relative;
 }
-.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents {
+.block-editor-list-view-leaf.is-selected {
   background: var(--wp-admin-theme-color);
+}
+.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
   color: #fff;
 }
 .is-dragging-components-draggable .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents {
   background: none;
   color: #1e1e1e;
 }
-.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus {
+.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-.is-dragging-components-draggable .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus {
-  box-shadow: none;
+.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
+}
+.block-editor-list-view-leaf.is-branch-selected:not(.is-selected) {
+  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
 }
 .block-editor-list-view-leaf.is-branch-selected.is-selected .block-editor-list-view-block-contents {
   border-radius: 2px 2px 0 0;
@@ -2530,7 +2490,6 @@
   border-radius: 2px;
 }
 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents {
-  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
   border-radius: 0;
 }
 .block-editor-list-view-leaf.is-branch-selected.is-last-of-selected-branch .block-editor-list-view-block-contents {
@@ -2551,15 +2510,6 @@
   position: relative;
   white-space: nowrap;
 }
-.block-editor-list-view-leaf .block-editor-list-view-block-contents:hover, .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block-contents:hover, .is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
-  box-shadow: none;
-}
-.block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
-  z-index: 1;
-}
 .block-editor-list-view-leaf .block-editor-list-view-block-contents.is-dropping-before::before {
   content: "";
   position: absolute;
@@ -2574,6 +2524,31 @@
   padding-right: 0;
   padding-left: 0;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
+  box-shadow: none;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -29px;
+  bottom: 0;
+  right: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  z-index: 1;
+  pointer-events: none;
+}
+.is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
+  box-shadow: none;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  z-index: 1;
+}
+.is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
+  box-shadow: none;
+}
 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
   opacity: 1;
   animation: edit-post__fade-in-animation 0.2s ease-out 0s;
@@ -2601,7 +2576,7 @@
   line-height: 0;
   width: 36px;
   opacity: 0;
-  vertical-align: top;
+  vertical-align: middle;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
@@ -2636,7 +2611,10 @@
   padding: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell {
-  padding-top: 8px;
+  padding-left: 5px;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon {
+  height: 24px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell-alignment-wrapper {
   display: flex;
@@ -2721,7 +2699,6 @@
   background: rgba(0, 0, 0, 0.3);
 }
 
-.block-editor-list-view-block-slot__description,
 .block-editor-list-view-block-select-button__description,
 .block-editor-list-view-appender__description {
   display: none;
@@ -3771,11 +3748,10 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-inserter__tabs {
   display: flex;
   flex-direction: column;
-  margin-top: -8px;
 }
 .block-editor-inserter__tabs .components-tab-panel__tabs {
   position: sticky;
-  top: 72px;
+  top: 64px;
   background: #fff;
   z-index: 1;
   border-bottom: 1px solid #ddd;

package/build-style/style.css

@@ -495,26 +495,15 @@
 .block-editor-block-list__insertion-point-indicator {
   position: absolute;
   background: var(--wp-admin-theme-color);
-  animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-list__insertion-point-indicator {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
 }
 .block-editor-block-list__insertion-point.is-vertical > .block-editor-block-list__insertion-point-indicator {
   top: 50%;
-  right: 0;
-  left: 0;
   height: 1px;
 }
 .block-editor-block-list__insertion-point.is-horizontal > .block-editor-block-list__insertion-point-indicator {
   top: 0;
   right: 0;
   left: 50%;
-  height: 100%;
   width: 1px;
 }
 
@@ -566,30 +555,6 @@
   background: #1e1e1e;
 }
 
-.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button,
-.block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button {
-  animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button,
-.block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
-}
-
-@keyframes block-editor-inserter__toggle__fade-in-animation-delayed {
-  0% {
-    opacity: 0;
-  }
-  60% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 /**
  * Block Toolbar when contextual.
  */
@@ -1218,10 +1183,6 @@
   width: 100%;
   overflow: hidden;
 }
-.block-editor-block-preview__container.editor-styles-wrapper {
-  padding: 0;
-  margin: 0;
-}
 .block-editor-block-preview__container .block-editor-block-preview__content {
   top: 0;
   left: 0;
@@ -1237,14 +1198,6 @@
 .block-editor-block-preview__container .block-editor-block-preview__content .block-list-appender {
   display: none;
 }
-.block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container {
-  padding-left: 0;
-  padding-right: 0;
-}
-.block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container > .wp-block[data-align=full] {
-  margin-left: 0;
-  margin-right: 0;
-}
 
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
   padding: 0;
@@ -1813,10 +1766,6 @@
 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
   margin-bottom: 12px;
 }
-.block-editor-color-gradient-control .block-editor-color-gradient-control__button-tabs {
-  display: block;
-  margin-bottom: 12px;
-}
 
 .block-editor-panel-color-gradient-settings .component-color-indicator {
   vertical-align: text-bottom;
@@ -1838,6 +1787,9 @@
     margin-right: 0;
   }
 }
+.block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
+  margin-bottom: inherit;
+}
 
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
@@ -1908,10 +1860,10 @@
   margin-left: -14px;
 }
 
-.components-font-appearance-control__select {
+.components-font-appearance-control {
   margin-bottom: 24px;
 }
-.components-font-appearance-control__select ul li {
+.components-font-appearance-control ul li {
   color: #1e1e1e;
   text-transform: capitalize;
 }
@@ -2086,11 +2038,14 @@
   border: none;
   text-align: left;
   padding: 12px 16px;
-  border-radius: 5px;
+  border-radius: 2px;
   height: auto;
 }
 .block-editor-link-control__search-item:hover, .block-editor-link-control__search-item:focus {
-  background-color: #ddd;
+  background-color: #f0f0f0;
+}
+.block-editor-link-control__search-item:hover .block-editor-link-control__search-item-type, .block-editor-link-control__search-item:focus .block-editor-link-control__search-item-type {
+  background: #fff;
 }
 .block-editor-link-control__search-item:focus:not(:disabled) {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
@@ -2165,7 +2120,7 @@
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
   font-weight: 700;
-  color: #000;
+  color: inherit;
   background-color: transparent;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title span {
@@ -2186,7 +2141,7 @@
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-type {
   display: block;
-  padding: 3px 8px;
+  padding: 3px 6px;
   margin-left: auto;
   font-size: 0.9em;
   background-color: #f0f0f0;
@@ -2509,19 +2464,24 @@
 .block-editor-list-view-leaf {
   position: relative;
 }
-.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents {
+.block-editor-list-view-leaf.is-selected {
   background: var(--wp-admin-theme-color);
+}
+.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
   color: #fff;
 }
 .is-dragging-components-draggable .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents {
   background: none;
   color: #1e1e1e;
 }
-.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus {
+.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-.is-dragging-components-draggable .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus {
-  box-shadow: none;
+.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
+}
+.block-editor-list-view-leaf.is-branch-selected:not(.is-selected) {
+  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
 }
 .block-editor-list-view-leaf.is-branch-selected.is-selected .block-editor-list-view-block-contents {
   border-radius: 2px 2px 0 0;
@@ -2530,7 +2490,6 @@
   border-radius: 2px;
 }
 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents {
-  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
   border-radius: 0;
 }
 .block-editor-list-view-leaf.is-branch-selected.is-last-of-selected-branch .block-editor-list-view-block-contents {
@@ -2551,15 +2510,6 @@
   position: relative;
   white-space: nowrap;
 }
-.block-editor-list-view-leaf .block-editor-list-view-block-contents:hover, .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block-contents:hover, .is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
-  box-shadow: none;
-}
-.block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
-  z-index: 1;
-}
 .block-editor-list-view-leaf .block-editor-list-view-block-contents.is-dropping-before::before {
   content: "";
   position: absolute;
@@ -2574,6 +2524,31 @@
   padding-left: 0;
   padding-right: 0;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
+  box-shadow: none;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -29px;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  z-index: 1;
+  pointer-events: none;
+}
+.is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
+  box-shadow: none;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  z-index: 1;
+}
+.is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
+  box-shadow: none;
+}
 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
   opacity: 1;
   animation: edit-post__fade-in-animation 0.2s ease-out 0s;
@@ -2601,7 +2576,7 @@
   line-height: 0;
   width: 36px;
   opacity: 0;
-  vertical-align: top;
+  vertical-align: middle;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
@@ -2636,7 +2611,10 @@
   padding: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell {
-  padding-top: 8px;
+  padding-right: 5px;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon {
+  height: 24px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell-alignment-wrapper {
   display: flex;
@@ -2721,7 +2699,6 @@
   background: rgba(0, 0, 0, 0.3);
 }
 
-.block-editor-list-view-block-slot__description,
 .block-editor-list-view-block-select-button__description,
 .block-editor-list-view-appender__description {
   display: none;
@@ -3771,11 +3748,10 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-inserter__tabs {
   display: flex;
   flex-direction: column;
-  margin-top: -8px;
 }
 .block-editor-inserter__tabs .components-tab-panel__tabs {
   position: sticky;
-  top: 72px;
+  top: 64px;
   background: #fff;
   z-index: 1;
   border-bottom: 1px solid #ddd;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "7.0.3",
+	"version": "7.0.4",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,26 +34,26 @@
 		"@babel/runtime": "^7.13.10",
 		"@react-spring/web": "^9.2.4",
 		"@wordpress/a11y": "^3.2.3",
-		"@wordpress/api-fetch": "^5.2.3",
+		"@wordpress/api-fetch": "^5.2.4",
 		"@wordpress/blob": "^3.2.1",
 		"@wordpress/block-serialization-default-parser": "^4.2.2",
-		"@wordpress/blocks": "^11.1.1",
-		"@wordpress/components": "^18.0.0",
-		"@wordpress/compose": "^5.0.3",
-		"@wordpress/data": "^6.1.1",
-		"@wordpress/data-controls": "^2.2.4",
+		"@wordpress/blocks": "^11.1.2",
+		"@wordpress/components": "^19.0.0",
+		"@wordpress/compose": "^5.0.4",
+		"@wordpress/data": "^6.1.2",
+		"@wordpress/data-controls": "^2.2.5",
 		"@wordpress/deprecated": "^3.2.2",
-		"@wordpress/dom": "^3.2.4",
-		"@wordpress/element": "^4.0.2",
+		"@wordpress/dom": "^3.2.5",
+		"@wordpress/element": "^4.0.3",
 		"@wordpress/hooks": "^3.2.1",
 		"@wordpress/html-entities": "^3.2.2",
 		"@wordpress/i18n": "^4.2.3",
-		"@wordpress/icons": "^6.0.0",
+		"@wordpress/icons": "^6.0.1",
 		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keyboard-shortcuts": "^3.0.3",
+		"@wordpress/keyboard-shortcuts": "^3.0.4",
 		"@wordpress/keycodes": "^3.2.3",
-		"@wordpress/notices": "^3.2.4",
-		"@wordpress/rich-text": "^5.0.3",
+		"@wordpress/notices": "^3.2.5",
+		"@wordpress/rich-text": "^5.0.4",
 		"@wordpress/shortcode": "^3.2.2",
 		"@wordpress/token-list": "^2.2.1",
 		"@wordpress/url": "^3.2.3",
@@ -76,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8f7f052bc04e3f4eb50f479ced14be1489b9fa79"
+	"gitHead": "157f4ae53ab98e574af01f72213ae5a9613159ff"
 }

package/src/components/block-actions/index.js

@@ -28,12 +28,11 @@ export default function BlockActions( {
 		canInsertBlockType,
 		getBlockRootClientId,
 		getBlocksByClientId,
+		canMoveBlocks,
 		canRemoveBlocks,
-		getTemplateLock,
-	} = useSelect( ( select ) => select( blockEditorStore ), [] );
+	} = useSelect( blockEditorStore );
 	const { getDefaultBlockName, getGroupingBlockName } = useSelect(
-		( select ) => select( blocksStore ),
-		[]
+		blocksStore
 	);
 
 	const blocks = getBlocksByClientId( clientIds );
@@ -51,6 +50,7 @@ export default function BlockActions( {
 		rootClientId
 	);
 
+	const canMove = canMoveBlocks( clientIds, rootClientId );
 	const canRemove = canRemoveBlocks( clientIds, rootClientId );
 
 	const {
@@ -70,8 +70,8 @@ export default function BlockActions( {
 	return children( {
 		canDuplicate,
 		canInsertDefaultBlock,
+		canMove,
 		canRemove,
-		isLocked: !! getTemplateLock( rootClientId ),
 		rootClientId,
 		blocks,
 		onDuplicate() {