@wordpress/block-editor 10.0.4 → 10.0.6

package/build-module/hooks/use-typography-props.js

@@ -8,7 +8,8 @@ import classnames from 'classnames';
  */
 
 import { getInlineStyles } from './style';
-import { getFontSizeClass } from '../components/font-sizes'; // This utility is intended to assist where the serialization of the typography
+import { getFontSizeClass } from '../components/font-sizes';
+import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils'; // This utility is intended to assist where the serialization of the typography
 // block support is being skipped for a block but the typography related CSS
 // styles still need to be generated so they can be applied to inner elements.
 
@@ -16,15 +17,27 @@ import { getFontSizeClass } from '../components/font-sizes'; // This utility is
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object} attributes Block attributes.
+ * @param {Object}  attributes            Block attributes.
+ * @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
 
-export function getTypographyClassesAndStyles(attributes) {
+export function getTypographyClassesAndStyles(attributes, isFluidFontSizeActive) {
   var _attributes$style;
 
-  const typographyStyles = (attributes === null || attributes === void 0 ? void 0 : (_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : _attributes$style.typography) || {};
+  let typographyStyles = (attributes === null || attributes === void 0 ? void 0 : (_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : _attributes$style.typography) || {};
+
+  if (isFluidFontSizeActive) {
+    var _attributes$style2, _attributes$style2$ty;
+
+    typographyStyles = { ...typographyStyles,
+      fontSize: getComputedFluidTypographyValue({
+        fontSize: attributes === null || attributes === void 0 ? void 0 : (_attributes$style2 = attributes.style) === null || _attributes$style2 === void 0 ? void 0 : (_attributes$style2$ty = _attributes$style2.typography) === null || _attributes$style2$ty === void 0 ? void 0 : _attributes$style2$ty.fontSize
+      })
+    };
+  }
+
   const style = getInlineStyles({
     typography: typographyStyles
   });

package/build-module/hooks/use-typography-props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/use-typography-props.js"],"names":["kebabCase","classnames","getInlineStyles","getFontSizeClass","getTypographyClassesAndStyles","attributes","typographyStyles","style","typography","fontFamilyClassName","fontFamily","className","fontSize"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,QAA1B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,eAAT,QAAgC,SAAhC;AACA,SAASC,gBAAT,QAAiC,0BAAjC,C,CAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,6BAAT,CAAwCC,UAAxC,EAAqD;AAAA;;AAC3D,QAAMC,gBAAgB,GAAG,CAAAD,UAAU,SAAV,IAAAA,UAAU,WAAV,iCAAAA,UAAU,CAAEE,KAAZ,wEAAmBC,UAAnB,KAAiC,EAA1D;AACA,QAAMD,KAAK,GAAGL,eAAe,CAAE;AAAEM,IAAAA,UAAU,EAAEF;AAAd,GAAF,CAA7B;AACA,QAAMG,mBAAmB,GAAG,CAAC,EAAEJ,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEK,UAAd,CAAD,GACxB,OAAOV,SAAS,CAAEK,UAAU,CAACK,UAAb,CAA2B,cADnB,GAEzB,EAFH;AAIA,QAAMC,SAAS,GAAGV,UAAU,CAC3BQ,mBAD2B,EAE3BN,gBAAgB,CAAEE,UAAF,aAAEA,UAAF,uBAAEA,UAAU,CAAEO,QAAd,CAFW,CAA5B;AAKA,SAAO;AACND,IAAAA,SADM;AAENJ,IAAAA;AAFM,GAAP;AAIA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport { getFontSizeClass } from '../components/font-sizes';\n\n// This utility is intended to assist where the serialization of the typography\n// block support is being skipped for a block but the typography related CSS\n// styles still need to be generated so they can be applied to inner elements.\n\n/**\n * Provides the CSS class names and inline styles for a block's typography support\n * attributes.\n *\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} Typography block support derived CSS classes & styles.\n */\nexport function getTypographyClassesAndStyles( attributes ) {\n\tconst typographyStyles = attributes?.style?.typography || {};\n\tconst style = getInlineStyles( { typography: typographyStyles } );\n\tconst fontFamilyClassName = !! attributes?.fontFamily\n\t\t? `has-${ kebabCase( attributes.fontFamily ) }-font-family`\n\t\t: '';\n\n\tconst className = classnames(\n\t\tfontFamilyClassName,\n\t\tgetFontSizeClass( attributes?.fontSize )\n\t);\n\n\treturn {\n\t\tclassName,\n\t\tstyle,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/use-typography-props.js"],"names":["kebabCase","classnames","getInlineStyles","getFontSizeClass","getComputedFluidTypographyValue","getTypographyClassesAndStyles","attributes","isFluidFontSizeActive","typographyStyles","style","typography","fontSize","fontFamilyClassName","fontFamily","className"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,QAA1B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,eAAT,QAAgC,SAAhC;AACA,SAASC,gBAAT,QAAiC,0BAAjC;AACA,SAASC,+BAAT,QAAgD,sCAAhD,C,CAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,6BAAT,CACNC,UADM,EAENC,qBAFM,EAGL;AAAA;;AACD,MAAIC,gBAAgB,GAAG,CAAAF,UAAU,SAAV,IAAAA,UAAU,WAAV,iCAAAA,UAAU,CAAEG,KAAZ,wEAAmBC,UAAnB,KAAiC,EAAxD;;AAEA,MAAKH,qBAAL,EAA6B;AAAA;;AAC5BC,IAAAA,gBAAgB,GAAG,EAClB,GAAGA,gBADe;AAElBG,MAAAA,QAAQ,EAAEP,+BAA+B,CAAE;AAC1CO,QAAAA,QAAQ,EAAEL,UAAF,aAAEA,UAAF,6CAAEA,UAAU,CAAEG,KAAd,gFAAE,mBAAmBC,UAArB,0DAAE,sBAA+BC;AADC,OAAF;AAFvB,KAAnB;AAMA;;AAED,QAAMF,KAAK,GAAGP,eAAe,CAAE;AAAEQ,IAAAA,UAAU,EAAEF;AAAd,GAAF,CAA7B;AACA,QAAMI,mBAAmB,GAAG,CAAC,EAAEN,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEO,UAAd,CAAD,GACxB,OAAOb,SAAS,CAAEM,UAAU,CAACO,UAAb,CAA2B,cADnB,GAEzB,EAFH;AAIA,QAAMC,SAAS,GAAGb,UAAU,CAC3BW,mBAD2B,EAE3BT,gBAAgB,CAAEG,UAAF,aAAEA,UAAF,uBAAEA,UAAU,CAAEK,QAAd,CAFW,CAA5B;AAKA,SAAO;AACNG,IAAAA,SADM;AAENL,IAAAA;AAFM,GAAP;AAIA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport { getFontSizeClass } from '../components/font-sizes';\nimport { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';\n\n// This utility is intended to assist where the serialization of the typography\n// block support is being skipped for a block but the typography related CSS\n// styles still need to be generated so they can be applied to inner elements.\n\n/**\n * Provides the CSS class names and inline styles for a block's typography support\n * attributes.\n *\n * @param {Object}  attributes            Block attributes.\n * @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.\n *\n * @return {Object} Typography block support derived CSS classes & styles.\n */\nexport function getTypographyClassesAndStyles(\n\tattributes,\n\tisFluidFontSizeActive\n) {\n\tlet typographyStyles = attributes?.style?.typography || {};\n\n\tif ( isFluidFontSizeActive ) {\n\t\ttypographyStyles = {\n\t\t\t...typographyStyles,\n\t\t\tfontSize: getComputedFluidTypographyValue( {\n\t\t\t\tfontSize: attributes?.style?.typography?.fontSize,\n\t\t\t} ),\n\t\t};\n\t}\n\n\tconst style = getInlineStyles( { typography: typographyStyles } );\n\tconst fontFamilyClassName = !! attributes?.fontFamily\n\t\t? `has-${ kebabCase( attributes.fontFamily ) }-font-family`\n\t\t: '';\n\n\tconst className = classnames(\n\t\tfontFamilyClassName,\n\t\tgetFontSizeClass( attributes?.fontSize )\n\t);\n\n\treturn {\n\t\tclassName,\n\t\tstyle,\n\t};\n}\n"]}

package/build-style/style-rtl.css

@@ -172,52 +172,77 @@
 /**
  * Cross-Block Selection
  */
+@keyframes selection-overlay__fade-in-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.4;
+  }
+}
 .block-editor-block-list__layout {
   position: relative;
 }
 .block-editor-block-list__layout::selection {
   background: transparent;
 }
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
+.has-multi-selection .block-editor-block-list__layout::selection {
+  background: transparent;
+}
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
+  background: transparent;
+}
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
+  content: "";
   position: absolute;
   z-index: 1;
   pointer-events: none;
-  content: "";
   top: 1px;
+  left: 1px;
   bottom: 1px;
   right: 1px;
-  left: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 1px;
+  background: var(--wp-admin-theme-color);
+  opacity: 0.4;
+  animation: selection-overlay__fade-in-animation 0.1s ease-out;
+  animation-fill-mode: forwards;
   outline: 2px solid transparent;
 }
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
-  box-shadow: 0 0 0 1px #fff;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
-  background: transparent;
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
 }
-.has-multi-selection .block-editor-block-list__layout::selection {
-  background: transparent;
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
 }
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 1px solid transparent;
+.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
+  outline: none;
 }
-.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
+.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  top: 1px;
+  left: 1px;
+  bottom: 1px;
+  right: 1px;
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  border-radius: 1px;
   outline: 2px solid transparent;
 }
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::before {
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
+}
+.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected {
+  box-shadow: none;
+  outline: none;
+}
+.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
   content: "";
   position: absolute;
   z-index: 0;
@@ -229,10 +254,7 @@
   border-radius: 2px;
   border-top: 4px solid #ccc;
 }
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
-  content: none;
-}
-.block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::before {
+.block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::after {
   border-color: var(--wp-admin-theme-color);
 }
 .has-multi-selection .block-editor-block-list__layout {
@@ -266,24 +288,6 @@
   /**
    * Notices
    */
-  /**
-   * Block Layout
-   */
-  /**
-  * Block styles and alignments
-  */
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-partially-selected::after {
-  top: -0.5px;
-  left: -0.5px;
-  bottom: -0.5px;
-  right: -0.5px;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after, .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
 }
 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
   z-index: 1;
@@ -302,43 +306,6 @@
 .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content {
   font-size: 13px;
 }
-.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
-  outline: none;
-}
-.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
-  content: "";
-  top: 1px;
-  bottom: 1px;
-  right: 1px;
-  left: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 1px;
-  outline: 2px solid transparent;
-}
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
-}
-.block-editor-block-list__layout .block-editor-block-list__block::after {
-  content: "";
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  border-radius: 2px;
-  box-shadow: 0 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-list__layout .block-editor-block-list__block::after {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning {
   min-height: 48px;
 }
@@ -378,31 +345,19 @@
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered {
   cursor: default;
-}
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after {
-  top: 1px;
-  right: 1px;
-  left: 1px;
-  bottom: 1px;
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  border-radius: 1px;
+  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+  border-radius: 2px;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
   cursor: default;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  border-radius: 2px;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
   cursor: unset;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  top: 1px;
-  right: 1px;
-  left: 1px;
-  bottom: 1px;
-  border-radius: 1px;
-}
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected:focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
@@ -1757,10 +1712,10 @@
   color: #000;
 }
 
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child {
   pointer-events: none;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after {
   content: "";
   position: absolute;
   top: 0;
@@ -1771,7 +1726,7 @@
   border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }
 

package/build-style/style.css

@@ -172,52 +172,77 @@
 /**
  * Cross-Block Selection
  */
+@keyframes selection-overlay__fade-in-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.4;
+  }
+}
 .block-editor-block-list__layout {
   position: relative;
 }
 .block-editor-block-list__layout::selection {
   background: transparent;
 }
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
+.has-multi-selection .block-editor-block-list__layout::selection {
+  background: transparent;
+}
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
+  background: transparent;
+}
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
+  content: "";
   position: absolute;
   z-index: 1;
   pointer-events: none;
-  content: "";
   top: 1px;
+  right: 1px;
   bottom: 1px;
   left: 1px;
-  right: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 1px;
+  background: var(--wp-admin-theme-color);
+  opacity: 0.4;
+  animation: selection-overlay__fade-in-animation 0.1s ease-out;
+  animation-fill-mode: forwards;
   outline: 2px solid transparent;
 }
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
-  box-shadow: 0 0 0 1px #fff;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
-  background: transparent;
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
 }
-.has-multi-selection .block-editor-block-list__layout::selection {
-  background: transparent;
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
 }
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 1px solid transparent;
+.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
+  outline: none;
 }
-.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
+.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  left: 1px;
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  border-radius: 1px;
   outline: 2px solid transparent;
 }
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::before {
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
+}
+.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected {
+  box-shadow: none;
+  outline: none;
+}
+.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
   content: "";
   position: absolute;
   z-index: 0;
@@ -229,10 +254,7 @@
   border-radius: 2px;
   border-top: 4px solid #ccc;
 }
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
-  content: none;
-}
-.block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::before {
+.block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::after {
   border-color: var(--wp-admin-theme-color);
 }
 .has-multi-selection .block-editor-block-list__layout {
@@ -266,24 +288,6 @@
   /**
    * Notices
    */
-  /**
-   * Block Layout
-   */
-  /**
-  * Block styles and alignments
-  */
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-partially-selected::after {
-  top: -0.5px;
-  right: -0.5px;
-  bottom: -0.5px;
-  left: -0.5px;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after, .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
 }
 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
   z-index: 1;
@@ -302,43 +306,6 @@
 .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content {
   font-size: 13px;
 }
-.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
-  outline: none;
-}
-.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
-  content: "";
-  top: 1px;
-  bottom: 1px;
-  left: 1px;
-  right: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 1px;
-  outline: 2px solid transparent;
-}
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
-}
-.block-editor-block-list__layout .block-editor-block-list__block::after {
-  content: "";
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  border-radius: 2px;
-  box-shadow: 0 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-list__layout .block-editor-block-list__block::after {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning {
   min-height: 48px;
 }
@@ -378,31 +345,19 @@
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered {
   cursor: default;
-}
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after {
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  border-radius: 1px;
+  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+  border-radius: 2px;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
   cursor: default;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  border-radius: 2px;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
   cursor: unset;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
-  border-radius: 1px;
-}
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected:focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
@@ -1757,10 +1712,10 @@
   color: #000;
 }
 
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child {
   pointer-events: none;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after {
   content: "";
   position: absolute;
   top: 0;
@@ -1771,7 +1726,7 @@
   border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.0.4",
+	"version": "10.0.6",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,7 +37,7 @@
 		"@wordpress/api-fetch": "^6.14.1",
 		"@wordpress/blob": "^3.17.1",
 		"@wordpress/blocks": "^11.16.4",
-		"@wordpress/components": "^21.0.4",
+		"@wordpress/components": "^21.0.5",
 		"@wordpress/compose": "^5.15.2",
 		"@wordpress/data": "^7.1.3",
 		"@wordpress/date": "^4.17.1",
@@ -59,7 +59,6 @@
 		"@wordpress/url": "^3.18.1",
 		"@wordpress/warning": "^2.17.1",
 		"@wordpress/wordcount": "^3.17.1",
-		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -79,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "491b4b522dffb4d25aca066ec55500f456ac4aa3"
+	"gitHead": "e0bb20cabd2152c8f0f6758e1b4e17fa24c5e588"
 }

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

@@ -40,6 +40,7 @@ function useContentBlocks( blockTypes, block ) {
 	const contenBlocksObjectAux = useMemo( () => {
 		return blockTypes.reduce( ( result, blockType ) => {
 			if (
+				blockType.name !== 'core/list-item' &&
 				Object.entries( blockType.attributes ).some(
 					( [ , { __experimentalRole } ] ) =>
 						__experimentalRole === 'content'
@@ -143,7 +144,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			getSelectedBlockCount,
 			getBlockName,
 			__unstableGetContentLockingParent,
-			getTemplateLock,
 		} = select( blockEditorStore );
 
 		const _selectedBlockClientId = getSelectedBlockClientId();
@@ -157,12 +157,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			selectedBlockClientId: _selectedBlockClientId,
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
-			topLevelLockedBlock:
-				getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
-					? _selectedBlockClientId
-					: __unstableGetContentLockingParent(
-							_selectedBlockClientId
-					  ),
+			topLevelLockedBlock: __unstableGetContentLockingParent(
+				_selectedBlockClientId
+			),
 		};
 	}, [] );