@wordpress/block-editor 10.2.0 → 10.3.0

package/build-module/utils/pre-parse-patterns.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/utils/pre-parse-patterns.js"],"names":["useSelect","select","useEffect","store","blockEditorStore","requestIdleCallback","window","callback","setTimeout","Date","now","requestAnimationFrame","cancelIdleCallback","clearTimeout","cancelAnimationFrame","usePreParsePatterns","patterns","_select","getSettings","__experimentalBlockPatterns","length","handle","index","__experimentalGetParsedPattern","name"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,iBAAlC;AACA,SAASC,SAAT,QAA0B,oBAA1B;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,UAA1C;;AAEA,MAAMC,mBAAmB,GAAG,CAAE,MAAM;AACnC,MAAK,OAAOC,MAAP,KAAkB,WAAvB,EAAqC;AACpC,WAASC,QAAF,IAAgB;AACtBC,MAAAA,UAAU,CAAE,MAAMD,QAAQ,CAAEE,IAAI,CAACC,GAAL,EAAF,CAAhB,EAAgC,CAAhC,CAAV;AACA,KAFD;AAGA;;AAED,SAAOJ,MAAM,CAACD,mBAAP,IAA8BC,MAAM,CAACK,qBAA5C;AACA,CAR2B,GAA5B;;AAUA,MAAMC,kBAAkB,GAAG,CAAE,MAAM;AAClC,MAAK,OAAON,MAAP,KAAkB,WAAvB,EAAqC;AACpC,WAAOO,YAAP;AACA;;AAED,SAAOP,MAAM,CAACM,kBAAP,IAA6BN,MAAM,CAACQ,oBAA3C;AACA,CAN0B,GAA3B;;AAQA,OAAO,SAASC,mBAAT,GAA+B;AACrC,QAAMC,QAAQ,GAAGhB,SAAS,CACvBiB,OAAF,IACCA,OAAO,CAAEb,gBAAF,CAAP,CAA4Bc,WAA5B,GACEC,2BAHsB,EAIzB,EAJyB,CAA1B;AAOAjB,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,EAAEc,QAAF,aAAEA,QAAF,eAAEA,QAAQ,CAAEI,MAAZ,CAAL,EAA0B;AACzB;AACA;;AAED,QAAIC,MAAJ;AACA,QAAIC,KAAK,GAAG,CAAC,CAAb;;AAEA,UAAMf,QAAQ,GAAG,MAAM;AACtBe,MAAAA,KAAK;;AACL,UAAKA,KAAK,IAAIN,QAAQ,CAACI,MAAvB,EAAgC;AAC/B;AACA;;AAEDnB,MAAAA,MAAM,CAAEG,gBAAF,CAAN,CAA2BmB,8BAA3B,CACCP,QAAQ,CAAEM,KAAF,CAAR,CAAkBE,IADnB;;AAIAH,MAAAA,MAAM,GAAGhB,mBAAmB,CAAEE,QAAF,CAA5B;AACA,KAXD;;AAaAc,IAAAA,MAAM,GAAGhB,mBAAmB,CAAEE,QAAF,CAA5B;AACA,WAAO,MAAMK,kBAAkB,CAAES,MAAF,CAA/B;AACA,GAvBQ,EAuBN,CAAEL,QAAF,CAvBM,CAAT;AAyBA,SAAO,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, select } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\n\nconst requestIdleCallback = ( () => {\n\tif ( typeof window === 'undefined' ) {\n\t\treturn ( callback ) => {\n\t\t\tsetTimeout( () => callback( Date.now() ), 0 );\n\t\t};\n\t}\n\n\treturn window.requestIdleCallback || window.requestAnimationFrame;\n} )();\n\nconst cancelIdleCallback = ( () => {\n\tif ( typeof window === 'undefined' ) {\n\t\treturn clearTimeout;\n\t}\n\n\treturn window.cancelIdleCallback || window.cancelAnimationFrame;\n} )();\n\nexport function usePreParsePatterns() {\n\tconst patterns = useSelect(\n\t\t( _select ) =>\n\t\t\t_select( blockEditorStore ).getSettings()\n\t\t\t\t.__experimentalBlockPatterns,\n\t\t[]\n\t);\n\n\tuseEffect( () => {\n\t\tif ( ! patterns?.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet handle;\n\t\tlet index = -1;\n\n\t\tconst callback = () => {\n\t\t\tindex++;\n\t\t\tif ( index >= patterns.length ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tselect( blockEditorStore ).__experimentalGetParsedPattern(\n\t\t\t\tpatterns[ index ].name\n\t\t\t);\n\n\t\t\thandle = requestIdleCallback( callback );\n\t\t};\n\n\t\thandle = requestIdleCallback( callback );\n\t\treturn () => cancelIdleCallback( handle );\n\t}, [ patterns ] );\n\n\treturn null;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/utils/pre-parse-patterns.js"],"names":["useSelect","select","useEffect","store","blockEditorStore","requestIdleCallback","window","callback","setTimeout","Date","now","requestAnimationFrame","cancelIdleCallback","clearTimeout","cancelAnimationFrame","usePreParsePatterns","patterns","isPreviewMode","_select","__experimentalBlockPatterns","__unstableIsPreviewMode","getSettings","length","handle","index","__experimentalGetParsedPattern","name"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,iBAAlC;AACA,SAASC,SAAT,QAA0B,oBAA1B;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,UAA1C;;AAEA,MAAMC,mBAAmB,GAAG,CAAE,MAAM;AACnC,MAAK,OAAOC,MAAP,KAAkB,WAAvB,EAAqC;AACpC,WAASC,QAAF,IAAgB;AACtBC,MAAAA,UAAU,CAAE,MAAMD,QAAQ,CAAEE,IAAI,CAACC,GAAL,EAAF,CAAhB,EAAgC,CAAhC,CAAV;AACA,KAFD;AAGA;;AAED,SAAOJ,MAAM,CAACD,mBAAP,IAA8BC,MAAM,CAACK,qBAA5C;AACA,CAR2B,GAA5B;;AAUA,MAAMC,kBAAkB,GAAG,CAAE,MAAM;AAClC,MAAK,OAAON,MAAP,KAAkB,WAAvB,EAAqC;AACpC,WAAOO,YAAP;AACA;;AAED,SAAOP,MAAM,CAACM,kBAAP,IAA6BN,MAAM,CAACQ,oBAA3C;AACA,CAN0B,GAA3B;;AAQA,OAAO,SAASC,mBAAT,GAA+B;AACrC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAA8BjB,SAAS,CAAIkB,OAAF,IAAe;AAC7D,UAAM;AAAEC,MAAAA,2BAAF;AAA+BC,MAAAA;AAA/B,QACLF,OAAO,CAAEd,gBAAF,CAAP,CAA4BiB,WAA5B,EADD;;AAEA,WAAO;AACNL,MAAAA,QAAQ,EAAEG,2BADJ;AAENF,MAAAA,aAAa,EAAEG;AAFT,KAAP;AAIA,GAP4C,EAO1C,EAP0C,CAA7C;AASAlB,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKe,aAAL,EAAqB;AACpB;AACA;;AACD,QAAK,EAAED,QAAF,aAAEA,QAAF,eAAEA,QAAQ,CAAEM,MAAZ,CAAL,EAA0B;AACzB;AACA;;AAED,QAAIC,MAAJ;AACA,QAAIC,KAAK,GAAG,CAAC,CAAb;;AAEA,UAAMjB,QAAQ,GAAG,MAAM;AACtBiB,MAAAA,KAAK;;AACL,UAAKA,KAAK,IAAIR,QAAQ,CAACM,MAAvB,EAAgC;AAC/B;AACA;;AAEDrB,MAAAA,MAAM,CAAEG,gBAAF,CAAN,CAA2BqB,8BAA3B,CACCT,QAAQ,CAAEQ,KAAF,CAAR,CAAkBE,IADnB;;AAIAH,MAAAA,MAAM,GAAGlB,mBAAmB,CAAEE,QAAF,CAA5B;AACA,KAXD;;AAaAgB,IAAAA,MAAM,GAAGlB,mBAAmB,CAAEE,QAAF,CAA5B;AACA,WAAO,MAAMK,kBAAkB,CAAEW,MAAF,CAA/B;AACA,GA1BQ,EA0BN,CAAEP,QAAF,EAAYC,aAAZ,CA1BM,CAAT;AA4BA,SAAO,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, select } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\n\nconst requestIdleCallback = ( () => {\n\tif ( typeof window === 'undefined' ) {\n\t\treturn ( callback ) => {\n\t\t\tsetTimeout( () => callback( Date.now() ), 0 );\n\t\t};\n\t}\n\n\treturn window.requestIdleCallback || window.requestAnimationFrame;\n} )();\n\nconst cancelIdleCallback = ( () => {\n\tif ( typeof window === 'undefined' ) {\n\t\treturn clearTimeout;\n\t}\n\n\treturn window.cancelIdleCallback || window.cancelAnimationFrame;\n} )();\n\nexport function usePreParsePatterns() {\n\tconst { patterns, isPreviewMode } = useSelect( ( _select ) => {\n\t\tconst { __experimentalBlockPatterns, __unstableIsPreviewMode } =\n\t\t\t_select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tpatterns: __experimentalBlockPatterns,\n\t\t\tisPreviewMode: __unstableIsPreviewMode,\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( isPreviewMode ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( ! patterns?.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet handle;\n\t\tlet index = -1;\n\n\t\tconst callback = () => {\n\t\t\tindex++;\n\t\t\tif ( index >= patterns.length ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tselect( blockEditorStore ).__experimentalGetParsedPattern(\n\t\t\t\tpatterns[ index ].name\n\t\t\t);\n\n\t\t\thandle = requestIdleCallback( callback );\n\t\t};\n\n\t\thandle = requestIdleCallback( callback );\n\t\treturn () => cancelIdleCallback( handle );\n\t}, [ patterns, isPreviewMode ] );\n\n\treturn null;\n}\n"]}

package/build-style/style-rtl.css

@@ -172,52 +172,82 @@
 /**
  * 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) {
+  border-radius: 2px;
+  overflow: hidden;
+}
+.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;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: var(--wp-admin-theme-color);
+  opacity: 0.4;
+  border-radius: 2px;
+  animation: selection-overlay__fade-in-animation 0.1s ease-out;
+  animation-fill-mode: forwards;
+  outline: 2px solid 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;
+  }
+}
+.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:not([contenteditable]):focus {
+  outline: none;
+}
+.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;
-  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.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;
-}
-.has-multi-selection .block-editor-block-list__layout::selection {
-  background: 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;
+.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-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 {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+.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::before {
+.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 +259,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 +293,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 +311,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;
 }
@@ -380,6 +352,9 @@
   cursor: default;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
   top: 1px;
   right: 1px;
   left: 1px;
@@ -389,20 +364,14 @@
 }
 .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) {
@@ -1037,7 +1006,6 @@
 @media (min-width: 600px) {
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
     flex-direction: column;
-    width: 36px;
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > * {
     height: 24px;
@@ -1110,6 +1078,7 @@
 .block-editor-block-patterns-list__list-item {
   cursor: pointer;
   margin-bottom: 24px;
+  position: relative;
 }
 .block-editor-block-patterns-list__list-item.is-placeholder {
   min-height: 100px;
@@ -1125,8 +1094,7 @@
   display: flex;
   align-items: center;
   overflow: hidden;
-  border-radius: 2px;
-  border: 1px solid #f0f0f0;
+  border-radius: 4px;
 }
 .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
   padding-top: 8px;
@@ -1134,7 +1102,7 @@
   text-align: center;
 }
 .block-editor-block-patterns-list__item:hover .block-editor-block-preview__container {
-  border: 1px solid var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 }
 .block-editor-block-patterns-list__item:focus .block-editor-block-preview__container {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1160,7 +1128,7 @@
   box-shadow: none;
   overflow-y: visible;
 }
-.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween) .components-popover__content * {
+.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone) .components-popover__content * {
   pointer-events: all;
 }
 
@@ -1177,6 +1145,16 @@
   pointer-events: all;
 }
 
+.components-popover.block-editor-block-popover__drop-zone * {
+  pointer-events: none;
+}
+.components-popover.block-editor-block-popover__drop-zone .block-editor-block-popover__drop-zone-foreground {
+  position: absolute;
+  inset: 0;
+  background-color: var(--wp-admin-theme-color);
+  border-radius: 2px;
+}
+
 .block-editor-block-preview__container {
   position: relative;
   width: 100%;
@@ -1764,10 +1742,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-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 {
+.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) > .wp-block-group__inner-container > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .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-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 {
+.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) > .wp-block-group__inner-container > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after {
   content: "";
   position: absolute;
   top: 0;
@@ -1775,9 +1753,10 @@
   bottom: 0;
   right: 0;
   pointer-events: none;
+  border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after::before {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after::before {
   content: "";
   position: absolute;
   top: 0;
@@ -1788,7 +1767,7 @@
   background: currentColor;
   opacity: 0.1;
 }
-.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 {
+.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) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }
 
@@ -2100,9 +2079,24 @@
   opacity: 0.6;
   cursor: default;
 }
-.components-button.block-editor-block-types-list__item:not(:disabled):hover {
+.components-button.block-editor-block-types-list__item:not(:disabled):hover .block-editor-block-types-list__item-title {
+  color: var(--wp-admin-theme-color) !important;
+  filter: brightness(0.95);
+}
+.components-button.block-editor-block-types-list__item:not(:disabled):hover svg {
   color: var(--wp-admin-theme-color) !important;
 }
+.components-button.block-editor-block-types-list__item:not(:disabled):hover::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  border-radius: 2px;
+  opacity: 0.04;
+  background: var(--wp-admin-theme-color);
+}
 .components-button.block-editor-block-types-list__item:not(:disabled):focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
@@ -3871,12 +3865,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding-right: 6px;
   padding-left: 6px;
 }
-.show-icon-labels .block-editor-block-switcher {
-  border-left: 1px solid #1e1e1e;
-}
-.show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle {
-  margin-right: 0;
-}
 .show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
 .show-icon-labels .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
   width: 0 !important;
@@ -3885,24 +3873,50 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .show-icon-labels .block-editor-block-parent-selector__button .block-editor-block-icon {
   width: 0;
 }
+.show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+  width: auto;
+}
 .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
-  margin-right: 0;
+  border-right: 1px solid #1e1e1e;
+  margin-right: 6px;
+  margin-left: -6px;
   white-space: nowrap;
 }
+.show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
+  border-right-color: #e0e0e0;
+}
 .show-icon-labels .block-editor-block-mover-button {
   padding-right: 8px !important;
   padding-left: 8px !important;
 }
 .show-icon-labels .block-editor-block-mover__drag-handle.has-icon {
-  padding-right: 6px !important;
-  padding-left: 6px !important;
-  border-left: 1px solid #1e1e1e;
+  padding-right: 12px !important;
+  padding-left: 12px !important;
+}
+.show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container {
+  border-width: 0;
 }
 @media (min-width: 600px) {
   .show-icon-labels .is-up-button.is-up-button.is-up-button {
-    border-bottom: 1px solid #1e1e1e;
     margin-left: 0;
     border-radius: 0;
+    order: 1;
+  }
+  .show-icon-labels .block-editor-block-mover__move-button-container {
+    border-right: 1px solid #1e1e1e;
+  }
+  .show-icon-labels .block-editor-block-mover__move-button-container::before {
+    content: "";
+    display: block;
+    height: 1px;
+    background: #1e1e1e;
+    order: 2;
+  }
+  .show-icon-labels .is-down-button.is-down-button.is-down-button {
+    order: 3;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {
+    background: #ddd;
   }
 }
 .show-icon-labels .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
@@ -3937,16 +3951,15 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   flex-direction: column;
   height: 100%;
   gap: 16px;
-  width: auto;
+}
+.block-editor-inserter__main-area.show-as-tabs {
+  gap: 0;
 }
 @media (min-width: 782px) {
   .block-editor-inserter__main-area {
     width: 350px;
   }
 }
-.block-editor-inserter__main-area.show-as-tabs {
-  gap: 0;
-}
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
@@ -4055,10 +4068,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding: 16px 16px 0;
 }
 
-.block-editor-inserter__panel-header-patterns {
-  padding: 16px 16px 0;
-}
-
 .block-editor-inserter__panel-content {
   padding: 16px;
 }
@@ -4139,6 +4148,87 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   font-size: 13px;
 }
 
+.block-editor-inserter__patterns-explore-button.components-button {
+  padding: 16px;
+  justify-content: center;
+  margin-top: 16px;
+  width: 100%;
+}
+
+.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category {
+  color: var(--wp-admin-theme-color);
+  position: relative;
+}
+.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category .components-flex-item {
+  filter: brightness(0.95);
+}
+.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category svg {
+  fill: var(--wp-admin-theme-color);
+}
+.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  border-radius: 2px;
+  opacity: 0.04;
+  background: var(--wp-admin-theme-color);
+}
+
+.block-editor-inserter__block-patterns-tabs-container {
+  height: 100%;
+}
+.block-editor-inserter__block-patterns-tabs-container nav {
+  height: 100%;
+}
+
+.block-editor-inserter__block-patterns-tabs {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  overflow-y: auto;
+  height: 100%;
+}
+
+.block-editor-inserter__patterns-fill-space {
+  flex-grow: 1;
+}
+
+.block-editor-inserter__patterns-category-panel {
+  background: #f0f0f0;
+  border-right: 1px solid #e0e0e0;
+  border-left: 1px solid #e0e0e0;
+  position: absolute;
+  padding: 32px 24px;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  scrollbar-gutter: stable both-edges;
+}
+@media (min-width: 782px) {
+  .block-editor-inserter__patterns-category-panel {
+    right: 100%;
+    display: block;
+    width: 300px;
+  }
+}
+.block-editor-inserter__patterns-category-panel .block-editor-block-patterns-list {
+  margin-top: 24px;
+}
+.block-editor-inserter__patterns-category-panel .block-editor-block-preview__container {
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.07);
+}
+.block-editor-inserter__patterns-category-panel .block-editor-block-preview__container:hover {
+  box-shadow: 0 0 0 2px #1e1e1e, 0 15px 25px rgba(0, 0, 0, 0.07);
+}
+.block-editor-inserter__patterns-category-panel .block-editor-block-patterns-list__item-title {
+  display: none;
+}
+
 .block-editor-inserter__preview-content {
   min-height: 144px;
   background: #f0f0f0;
@@ -4278,6 +4368,10 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   max-height: 800px;
 }
 
+.block-editor-inserter__patterns-category-panel-title {
+  font-size: calc(1.25 * 13px);
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }
@@ -4301,7 +4395,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 @media (min-width: 600px) {
   .edit-post-header__settings .editor-post-preview,
-.edit-site-header__actions .editor-post-preview {
+.edit-site-header-edit-mode__actions .editor-post-preview {
     display: none;
   }
 }
@@ -4336,7 +4430,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
-  grid-template-rows: 25px auto;
+  grid-template-rows: 16px auto;
 }
 
 .component-spacing-sizes-control {
@@ -4359,15 +4453,16 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: 1/1;
   justify-content: left;
   height: 16px;
-  margin-top: 12px;
+  margin-top: 16px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__side-label {
   grid-column: 1/1;
   justify-self: left;
   margin-bottom: 0;
 }
-.component-spacing-sizes-control.is-unlinked .components-range-control.components-spacing-sizes-control__range-control {
-  margin-top: 12px;
+.component-spacing-sizes-control.is-unlinked .components-range-control.components-spacing-sizes-control__range-control,
+.component-spacing-sizes-control.is-unlinked .components-spacing-sizes-control__custom-value-input {
+  margin-top: 8px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
@@ -4385,12 +4480,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: 2/2;
   grid-row: 1/1;
   justify-self: end;
-  padding: 0;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon {
-  padding: 0;
-  min-width: 24px;
-  height: 16px;
+  margin-top: -4px;
 }
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
   margin-left: 4px;
@@ -4398,29 +4488,37 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single {
   grid-column: 3/3;
   justify-self: end;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single.is-small.has-icon {
-  padding: 0;
-  min-width: 24px;
-  height: 16px;
   margin-top: 12px;
 }
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
   grid-column: 3/3;
   grid-row: 1/1;
   justify-self: end;
+  line-height: 0;
+  margin-top: -4px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
   grid-column: span 2;
-  margin-right: 8px;
-  height: 30px;
+  margin-right: 16px;
+  margin-top: 8px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
   width: 124px;
+  margin-top: 8px;
+}
+.component-spacing-sizes-control .components-range-control {
+  height: 40px;
+  /* Vertically center the RangeControl until it has true 40px height. */
+  display: flex;
+  align-items: center;
+}
+.component-spacing-sizes-control .components-range-control > .components-base-control__field {
+  /* Fixes RangeControl contents when the outer wrapper is flex */
+  flex: 1;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__range-control {
   grid-column: span 3;
-  height: 40px;
+  margin-top: 8px;
 }
 .component-spacing-sizes-control .components-range-control__mark {
   height: 4px;
@@ -4439,6 +4537,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
   grid-column: span 3;
+  margin-top: 8px;
 }
 
 body.admin-color-light {