@wordpress/block-editor 12.19.5 → 12.21.0

package/build-module/utils/calculate-scale.js

@@ -0,0 +1,11 @@
+const clamp = (lowerlimit, width, upperlimit) => {
+  if (width < lowerlimit) return lowerlimit;
+  if (width > upperlimit) return upperlimit;
+  return width;
+};
+export default function calculateScale(scaleConfig, width) {
+  const scaleSlope = (scaleConfig.maxScale - scaleConfig.minScale) / (scaleConfig.maxWidth - scaleConfig.minWidth);
+  const scaleIntercept = scaleConfig.minScale - scaleSlope * scaleConfig.minWidth;
+  return clamp(scaleConfig.maxScale, scaleSlope * width + scaleIntercept, scaleConfig.minScale);
+}
+//# sourceMappingURL=calculate-scale.js.map

package/build-module/utils/calculate-scale.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clamp","lowerlimit","width","upperlimit","calculateScale","scaleConfig","scaleSlope","maxScale","minScale","maxWidth","minWidth","scaleIntercept"],"sources":["@wordpress/block-editor/src/utils/calculate-scale.js"],"sourcesContent":["const clamp = ( lowerlimit, width, upperlimit ) => {\n\tif ( width < lowerlimit ) return lowerlimit;\n\tif ( width > upperlimit ) return upperlimit;\n\treturn width;\n};\n\nexport default function calculateScale( scaleConfig, width ) {\n\tconst scaleSlope =\n\t\t( scaleConfig.maxScale - scaleConfig.minScale ) /\n\t\t( scaleConfig.maxWidth - scaleConfig.minWidth );\n\n\tconst scaleIntercept =\n\t\tscaleConfig.minScale - scaleSlope * scaleConfig.minWidth;\n\n\treturn clamp(\n\t\tscaleConfig.maxScale,\n\t\tscaleSlope * width + scaleIntercept,\n\t\tscaleConfig.minScale\n\t);\n}\n"],"mappings":"AAAA,MAAMA,KAAK,GAAGA,CAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,KAAM;EAClD,IAAKD,KAAK,GAAGD,UAAU,EAAG,OAAOA,UAAU;EAC3C,IAAKC,KAAK,GAAGC,UAAU,EAAG,OAAOA,UAAU;EAC3C,OAAOD,KAAK;AACb,CAAC;AAED,eAAe,SAASE,cAAcA,CAAEC,WAAW,EAAEH,KAAK,EAAG;EAC5D,MAAMI,UAAU,GACf,CAAED,WAAW,CAACE,QAAQ,GAAGF,WAAW,CAACG,QAAQ,KAC3CH,WAAW,CAACI,QAAQ,GAAGJ,WAAW,CAACK,QAAQ,CAAE;EAEhD,MAAMC,cAAc,GACnBN,WAAW,CAACG,QAAQ,GAAGF,UAAU,GAAGD,WAAW,CAACK,QAAQ;EAEzD,OAAOV,KAAK,CACXK,WAAW,CAACE,QAAQ,EACpBD,UAAU,GAAGJ,KAAK,GAAGS,cAAc,EACnCN,WAAW,CAACG,QACb,CAAC;AACF"}

package/build-style/content-rtl.css

@@ -482,11 +482,15 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   margin-bottom: auto;
 }
 
-.block-editor-iframe__body {
+.block-editor-iframe__html {
   transition: all 0.3s;
   transform-origin: top center;
 }
 
+.block-editor-iframe__html[style*=scale] {
+  background-color: #ddd;
+}
+
 .is-vertical .block-list-appender {
   width: 24px;
   margin-left: auto;
@@ -734,8 +738,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .block-editor-default-block-appender .block-editor-default-block-appender__content {
   opacity: 0.62;
 }
-:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child {
+:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child, :where(.wp-site-blocks) .block-editor-default-block-appender > :first-child:first-child {
   margin-block-start: 0;
+  margin-block-end: 0;
 }
 .block-editor-default-block-appender .components-drop-zone__content-icon {
   display: none;

package/build-style/content.css

@@ -482,11 +482,15 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   margin-bottom: auto;
 }
 
-.block-editor-iframe__body {
+.block-editor-iframe__html {
   transition: all 0.3s;
   transform-origin: top center;
 }
 
+.block-editor-iframe__html[style*=scale] {
+  background-color: #ddd;
+}
+
 .is-vertical .block-list-appender {
   width: 24px;
   margin-right: auto;
@@ -734,8 +738,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .block-editor-default-block-appender .block-editor-default-block-appender__content {
   opacity: 0.62;
 }
-:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child {
+:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child, :where(.wp-site-blocks) .block-editor-default-block-appender > :first-child:first-child {
   margin-block-start: 0;
+  margin-block-end: 0;
 }
 .block-editor-default-block-appender .components-drop-zone__content-icon {
   display: none;

package/build-style/style-rtl.css

@@ -797,7 +797,7 @@ iframe[name=editor-canvas].has-editor-padding {
   outline: none;
 }
 .components-button.block-editor-block-mover-button:focus-visible::before {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 
@@ -972,14 +972,6 @@ iframe[name=editor-canvas].has-editor-padding {
   z-index: 1000001;
 }
 
-.block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
-  padding: 0;
-}
-
-.block-editor-block-styles + .default-style-picker__default-switcher {
-  margin-top: 16px;
-}
-
 .block-editor-block-styles__preview-panel {
   display: none;
   z-index: 90;
@@ -1017,7 +1009,7 @@ iframe[name=editor-canvas].has-editor-padding {
   color: #fff;
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
@@ -1619,6 +1611,37 @@ iframe[name=editor-canvas].has-editor-padding {
   direction: ltr;
 }
 
+.block-editor-grid-visualizer {
+  z-index: 30 !important;
+}
+
+.block-editor-grid-visualizer .components-popover__content * {
+  pointer-events: none !important;
+}
+
+.block-editor-grid-visualizer__grid {
+  display: grid;
+}
+
+.block-editor-grid-visualizer__item {
+  border: 1px dashed #ddd;
+}
+
+.block-editor-grid-item-resizer {
+  z-index: 30 !important;
+}
+
+.block-editor-grid-item-resizer .components-popover__content * {
+  pointer-events: none !important;
+}
+
+.block-editor-grid-item-resizer__box {
+  border: 1px solid var(--wp-admin-theme-color);
+}
+.block-editor-grid-item-resizer__box .components-resizable-box__handle {
+  pointer-events: all !important;
+}
+
 .block-editor-height-control {
   border: 0;
   margin: 0;
@@ -2044,7 +2067,7 @@ iframe[name=editor-canvas].has-editor-padding {
   box-shadow: none;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
   text-decoration: none;
 }
@@ -3198,7 +3221,7 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 
 .html-anchor-control .components-external-link {
-  display: block;
+  display: inline-block;
   margin-top: 8px;
 }
 
@@ -3364,19 +3387,6 @@ iframe[name=editor-canvas].has-editor-padding {
   margin-bottom: 16px;
 }
 
-.block-editor__padding-visualizer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  opacity: 0.5;
-  border-color: var(--wp-admin-theme-color);
-  border-style: solid;
-  pointer-events: none;
-  box-sizing: border-box;
-}
-
 .block-editor-hooks__position-selection__select-control .components-custom-select-control__hint {
   display: none;
 }
@@ -3391,6 +3401,19 @@ iframe[name=editor-canvas].has-editor-padding {
   text-align: right;
 }
 
+.block-editor__spacing-visualizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  opacity: 0.5;
+  border-color: var(--wp-admin-theme-color);
+  border-style: solid;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
 .typography-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -4307,6 +4330,13 @@ iframe[name=editor-canvas].has-editor-padding {
   height: 40px;
 }
 
+.is-zoom-out .block-editor-inserter__menu {
+  display: flex;
+}
+.is-zoom-out .block-editor-inserter__patterns-category-dialog {
+  position: static;
+}
+
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;

package/build-style/style.css

@@ -797,7 +797,7 @@ iframe[name=editor-canvas].has-editor-padding {
   outline: none;
 }
 .components-button.block-editor-block-mover-button:focus-visible::before {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 
@@ -972,14 +972,6 @@ iframe[name=editor-canvas].has-editor-padding {
   z-index: 1000001;
 }
 
-.block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
-  padding: 0;
-}
-
-.block-editor-block-styles + .default-style-picker__default-switcher {
-  margin-top: 16px;
-}
-
 .block-editor-block-styles__preview-panel {
   display: none;
   z-index: 90;
@@ -1017,7 +1009,7 @@ iframe[name=editor-canvas].has-editor-padding {
   color: #fff;
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
@@ -1620,6 +1612,37 @@ iframe[name=editor-canvas].has-editor-padding {
   direction: ltr;
 }
 
+.block-editor-grid-visualizer {
+  z-index: 30 !important;
+}
+
+.block-editor-grid-visualizer .components-popover__content * {
+  pointer-events: none !important;
+}
+
+.block-editor-grid-visualizer__grid {
+  display: grid;
+}
+
+.block-editor-grid-visualizer__item {
+  border: 1px dashed #ddd;
+}
+
+.block-editor-grid-item-resizer {
+  z-index: 30 !important;
+}
+
+.block-editor-grid-item-resizer .components-popover__content * {
+  pointer-events: none !important;
+}
+
+.block-editor-grid-item-resizer__box {
+  border: 1px solid var(--wp-admin-theme-color);
+}
+.block-editor-grid-item-resizer__box .components-resizable-box__handle {
+  pointer-events: all !important;
+}
+
 .block-editor-height-control {
   border: 0;
   margin: 0;
@@ -2045,7 +2068,7 @@ iframe[name=editor-canvas].has-editor-padding {
   box-shadow: none;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
   text-decoration: none;
 }
@@ -3199,7 +3222,7 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 
 .html-anchor-control .components-external-link {
-  display: block;
+  display: inline-block;
   margin-top: 8px;
 }
 
@@ -3365,19 +3388,6 @@ iframe[name=editor-canvas].has-editor-padding {
   margin-bottom: 16px;
 }
 
-.block-editor__padding-visualizer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 0.5;
-  border-color: var(--wp-admin-theme-color);
-  border-style: solid;
-  pointer-events: none;
-  box-sizing: border-box;
-}
-
 .block-editor-hooks__position-selection__select-control .components-custom-select-control__hint {
   display: none;
 }
@@ -3392,6 +3402,19 @@ iframe[name=editor-canvas].has-editor-padding {
   text-align: left;
 }
 
+.block-editor__spacing-visualizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.5;
+  border-color: var(--wp-admin-theme-color);
+  border-style: solid;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
 .typography-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -4308,6 +4331,13 @@ iframe[name=editor-canvas].has-editor-padding {
   height: 40px;
 }
 
+.is-zoom-out .block-editor-inserter__menu {
+  display: flex;
+}
+.is-zoom-out .block-editor-inserter__patterns-category-dialog {
+  position: static;
+}
+
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.19.5",
+	"version": "12.21.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,41 +35,40 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.51.1",
-		"@wordpress/api-fetch": "^6.48.1",
-		"@wordpress/blob": "^3.51.1",
-		"@wordpress/blocks": "^12.28.5",
-		"@wordpress/commands": "^0.22.4",
-		"@wordpress/components": "^26.0.4",
-		"@wordpress/compose": "^6.28.1",
-		"@wordpress/data": "^9.21.1",
-		"@wordpress/date": "^4.51.1",
-		"@wordpress/deprecated": "^3.51.1",
-		"@wordpress/dom": "^3.51.1",
-		"@wordpress/element": "^5.28.1",
-		"@wordpress/escape-html": "^2.51.1",
-		"@wordpress/hooks": "^3.51.1",
-		"@wordpress/html-entities": "^3.51.1",
-		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.3",
-		"@wordpress/is-shallow-equal": "^4.51.1",
-		"@wordpress/keyboard-shortcuts": "^4.28.1",
-		"@wordpress/keycodes": "^3.51.1",
-		"@wordpress/notices": "^4.19.1",
-		"@wordpress/preferences": "^3.28.4",
-		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/rich-text": "^6.28.3",
-		"@wordpress/style-engine": "^1.34.1",
-		"@wordpress/token-list": "^2.51.1",
-		"@wordpress/url": "^3.52.1",
-		"@wordpress/warning": "^2.51.1",
-		"@wordpress/wordcount": "^3.51.1",
+		"@wordpress/a11y": "^3.53.0",
+		"@wordpress/api-fetch": "^6.50.0",
+		"@wordpress/blob": "^3.53.0",
+		"@wordpress/blocks": "^12.30.0",
+		"@wordpress/commands": "^0.24.0",
+		"@wordpress/components": "^27.1.0",
+		"@wordpress/compose": "^6.30.0",
+		"@wordpress/data": "^9.23.0",
+		"@wordpress/date": "^4.53.0",
+		"@wordpress/deprecated": "^3.53.0",
+		"@wordpress/dom": "^3.53.0",
+		"@wordpress/element": "^5.30.0",
+		"@wordpress/escape-html": "^2.53.0",
+		"@wordpress/hooks": "^3.53.0",
+		"@wordpress/html-entities": "^3.53.0",
+		"@wordpress/i18n": "^4.53.0",
+		"@wordpress/icons": "^9.44.0",
+		"@wordpress/is-shallow-equal": "^4.53.0",
+		"@wordpress/keyboard-shortcuts": "^4.30.0",
+		"@wordpress/keycodes": "^3.53.0",
+		"@wordpress/notices": "^4.21.0",
+		"@wordpress/preferences": "^3.30.0",
+		"@wordpress/private-apis": "^0.35.0",
+		"@wordpress/rich-text": "^6.30.0",
+		"@wordpress/style-engine": "^1.36.0",
+		"@wordpress/token-list": "^2.53.0",
+		"@wordpress/url": "^3.54.0",
+		"@wordpress/warning": "^2.53.0",
+		"@wordpress/wordcount": "^3.53.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",
-		"dom-scroll-into-view": "^1.2.1",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"postcss": "^8.4.21",
@@ -87,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4927ea437069f9aed12f696df294a79bd8e12fd5"
+	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
 }

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

@@ -14,6 +14,7 @@ import Iframe from '../iframe';
 import WritingFlow from '../writing-flow';
 import { useMouseMoveTypingReset } from '../observe-typing';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
+import { useBlockCommands } from '../use-block-commands';
 
 export function ExperimentalBlockCanvas( {
 	shouldIframe = true,
@@ -23,6 +24,7 @@ export function ExperimentalBlockCanvas( {
 	contentRef: contentRefProp,
 	iframeProps,
 } ) {
+	useBlockCommands();
 	const resetTypingRef = useMouseMoveTypingReset();
 	const clearerRef = useBlockSelectionClearer();
 	const localRef = useRef();

package/src/components/block-draggable/test/index.native.js

@@ -382,7 +382,7 @@ describe( 'BlockDraggable', () => {
 			// activate the gesture. Since this not available in tests, the library
 			// displays a warning message.
 			expect( console ).toHaveWarnedWith(
-				'[Reanimated] You can not use setGestureState in non-worklet function.'
+				'[Reanimated] setGestureState() cannot be used with Jest.'
 			);
 			expect( getEditorHtml() ).toMatchSnapshot(
 				'Paragraph block moved from first to second position'
@@ -410,7 +410,7 @@ describe( 'BlockDraggable', () => {
 			// activate the gesture. Since this not available in tests, the library
 			// displays a warning message.
 			expect( console ).toHaveWarnedWith(
-				'[Reanimated] You can not use setGestureState in non-worklet function.'
+				'[Reanimated] setGestureState() cannot be used with Jest.'
 			);
 			expect( getEditorHtml() ).toMatchSnapshot(
 				'Spacer block moved from third to first position'

package/src/components/block-heading-level-dropdown/index.js

@@ -46,31 +46,23 @@ export default function HeadingLevelDropdown( {
 			icon={ <HeadingLevelIcon level={ value } /> }
 			label={ __( 'Change level' ) }
 			controls={ options.map( ( targetLevel ) => {
-				{
-					const isActive = targetLevel === value;
-
-					return {
-						icon: (
-							<HeadingLevelIcon
-								level={ targetLevel }
-								isPressed={ isActive }
-							/>
-						),
-						title:
-							targetLevel === 0
-								? __( 'Paragraph' )
-								: sprintf(
-										// translators: %s: heading level e.g: "1", "2", "3"
-										__( 'Heading %d' ),
-										targetLevel
-								  ),
-						isActive,
-						onClick() {
-							onChange( targetLevel );
-						},
-						role: 'menuitemradio',
-					};
-				}
+				const isActive = targetLevel === value;
+				return {
+					icon: <HeadingLevelIcon level={ targetLevel } />,
+					title:
+						targetLevel === 0
+							? __( 'Paragraph' )
+							: sprintf(
+									// translators: %s: heading level e.g: "1", "2", "3"
+									__( 'Heading %d' ),
+									targetLevel
+							  ),
+					isActive,
+					onClick() {
+						onChange( targetLevel );
+					},
+					role: 'menuitemradio',
+				};
 			} ) }
 		/>
 	);

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

@@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	getBlockType,
 	getUnregisteredTypeHandlerName,
-	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { PanelBody, __unstableMotion as motion } from '@wordpress/components';
@@ -21,7 +20,6 @@ import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 import BlockStyles from '../block-styles';
-import DefaultStylePicker from '../default-style-picker';
 import { default as InspectorControls } from '../inspector-controls';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
@@ -277,15 +275,6 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						<div>
 							<PanelBody title={ __( 'Styles' ) }>
 								<BlockStyles clientId={ clientId } />
-								{ hasBlockSupport(
-									blockName,
-									'defaultStylePicker',
-									true
-								) && (
-									<DefaultStylePicker
-										blockName={ blockName }
-									/>
-								) }
 							</PanelBody>
 						</div>
 					) }

package/src/components/block-list/block-invalid-warning.native.js

@@ -53,7 +53,7 @@ export default function BlockInvalidWarning( { clientId } ) {
 	return (
 		<TouchableWithoutFeedback
 			onPress={ attemptBlockRecovery }
-			accessible={ true }
+			accessible
 			accessibilityRole={ 'button' }
 		>
 			<Warning

package/src/components/block-list/block-list-item.native.js

@@ -98,7 +98,7 @@ function BlockListItemContent( {
 			const name = getBlockName( clientId );
 			const parentName = getBlockName( rootClientId );
 			const { align } = getBlockAttributes( clientId ) || {};
-			const { align: parentBlockAlign } =
+			const { textAlign: parentBlockAlign } =
 				getBlockAttributes( rootClientId ) || {};
 
 			return {

package/src/components/block-list/block-outline.native.js

@@ -14,16 +14,11 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import styles from './block.scss';
 
 const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing', 'core/freeform' ];
+const DESIGN_BLOCKS_WITHOUT_OUTLINE = [ 'core/button', 'core/spacer' ];
+const MEDIA_BLOCKS_WITH_OUTLINE = [ 'core/audio', 'core/file' ];
 
-function BlockOutline( {
-	blockCategory,
-	hasInnerBlocks,
-	isRootList,
-	isSelected,
-	name,
-} ) {
+function BlockOutline( { blockCategory, hasInnerBlocks, isSelected, name } ) {
 	const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name );
-	const socialBlockWithOutline = name.includes( 'core/social-link' );
 
 	const hasBlockTextCategory =
 		blockCategory === 'text' && ! textBlockWithOutline;
@@ -44,19 +39,39 @@ function BlockOutline( {
 		hasBlockTextCategory && styles.solidBorderTextContent,
 	];
 
-	const shoudlShowOutline =
-		isSelected &&
-		( ( hasBlockTextCategory && hasInnerBlocks ) ||
-			( ! hasBlockTextCategory && hasInnerBlocks ) ||
-			( ! hasBlockTextCategory && isRootList ) ||
-			socialBlockWithOutline ||
-			textBlockWithOutline );
-
-	return (
-		shoudlShowOutline && (
-			<View pointerEvents="box-none" style={ styleSolidBorder } />
-		)
-	);
+	if ( ! isSelected ) {
+		return null;
+	}
+
+	let shouldShowOutline = true;
+	if ( hasBlockTextCategory && ! hasInnerBlocks ) {
+		shouldShowOutline = false;
+	} else if (
+		blockCategory === 'media' &&
+		! hasInnerBlocks &&
+		! MEDIA_BLOCKS_WITH_OUTLINE.includes( name )
+	) {
+		shouldShowOutline = false;
+	} else if ( blockCategory === 'media' && name === 'core/cover' ) {
+		shouldShowOutline = false;
+	} else if (
+		blockCategory === 'design' &&
+		DESIGN_BLOCKS_WITHOUT_OUTLINE.includes( name )
+	) {
+		shouldShowOutline = false;
+	}
+
+	if ( shouldShowOutline ) {
+		return (
+			<View
+				pointerEvents="box-none"
+				style={ styleSolidBorder }
+				testID="block-outline"
+			/>
+		);
+	}
+
+	return null;
 }
 
 export default BlockOutline;

package/src/components/block-list/block-selection-button.native.js

@@ -40,9 +40,7 @@ const BlockSelectionButton = ( {
 				onPress={ () => {
 					/* Open BottomSheet with markup. */
 				} }
-				disabled={
-					true
-				} /* Disable temporarily since onPress function is empty. */
+				disabled /* Disable temporarily since onPress function is empty. */
 			>
 				{ rootClientId &&
 					rootBlockIcon && [