@wordpress/block-editor 12.24.0 → 12.26.0

package/build-types/components/block-context/index.d.ts

@@ -5,7 +5,7 @@
  *
  * @param {BlockContextProviderProps} props
  */
-export function BlockContextProvider({ value, children }: BlockContextProviderProps): JSX.Element;
+export function BlockContextProvider({ value, children }: BlockContextProviderProps): import("react").JSX.Element;
 export default Context;
 export type ReactNode = import('react').ReactNode;
 export type BlockContextProviderProps = {

package/build-types/components/block-context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAkBA;;;;;;GAMG;AACH,0DAFW,yBAAyB,eAUnC;;wBA5Ba,OAAO,OAAO,EAAE,SAAS;;;;;;WAKzB,OAAO,MAAM,MAAG;;;;cAEhB,SAAS;;AAPvB,qDAAqD;AAErD;;;;;;GAMG;AAEH,wDAAwD;AACxD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,OAAO,MAAM,MAAG,CAAC,CAChB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAkBA;;;;;;GAMG;AACH,0DAFW,yBAAyB,+BAUnC;;wBA5Ba,OAAO,OAAO,EAAE,SAAS;;;;;;WAKzB,OAAO,MAAM,MAAG;;;;cAEhB,SAAS;;AAPvB,qDAAqD;AAErD;;;;;;GAMG;AAEH,wDAAwD;AACxD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,OAAO,MAAM,MAAG,CAAC,CAChB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.24.0",
+	"version": "12.26.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,37 +35,37 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.56.0",
-		"@wordpress/api-fetch": "^6.53.0",
-		"@wordpress/blob": "^3.56.0",
-		"@wordpress/blocks": "^12.33.0",
-		"@wordpress/commands": "^0.27.0",
-		"@wordpress/components": "^27.4.0",
-		"@wordpress/compose": "^6.33.0",
-		"@wordpress/data": "^9.26.0",
-		"@wordpress/date": "^4.56.0",
-		"@wordpress/deprecated": "^3.56.0",
-		"@wordpress/dom": "^3.56.0",
-		"@wordpress/element": "^5.33.0",
-		"@wordpress/escape-html": "^2.56.0",
-		"@wordpress/hooks": "^3.56.0",
-		"@wordpress/html-entities": "^3.56.0",
-		"@wordpress/i18n": "^4.56.0",
-		"@wordpress/icons": "^9.47.0",
-		"@wordpress/is-shallow-equal": "^4.56.0",
-		"@wordpress/keyboard-shortcuts": "^4.33.0",
-		"@wordpress/keycodes": "^3.56.0",
-		"@wordpress/notices": "^4.24.0",
-		"@wordpress/preferences": "^3.33.0",
-		"@wordpress/private-apis": "^0.38.0",
-		"@wordpress/rich-text": "^6.33.0",
-		"@wordpress/style-engine": "^1.39.0",
-		"@wordpress/token-list": "^2.56.0",
-		"@wordpress/url": "^3.57.0",
-		"@wordpress/warning": "^2.56.0",
-		"@wordpress/wordcount": "^3.56.0",
+		"@wordpress/a11y": "^3.58.0",
+		"@wordpress/api-fetch": "^6.55.0",
+		"@wordpress/blob": "^3.58.0",
+		"@wordpress/blocks": "^12.35.0",
+		"@wordpress/commands": "^0.29.0",
+		"@wordpress/components": "^27.6.0",
+		"@wordpress/compose": "^6.35.0",
+		"@wordpress/data": "^9.28.0",
+		"@wordpress/date": "^4.58.0",
+		"@wordpress/deprecated": "^3.58.0",
+		"@wordpress/dom": "^3.58.0",
+		"@wordpress/element": "^5.35.0",
+		"@wordpress/escape-html": "^2.58.0",
+		"@wordpress/hooks": "^3.58.0",
+		"@wordpress/html-entities": "^3.58.0",
+		"@wordpress/i18n": "^4.58.0",
+		"@wordpress/icons": "^9.49.0",
+		"@wordpress/is-shallow-equal": "^4.58.0",
+		"@wordpress/keyboard-shortcuts": "^4.35.0",
+		"@wordpress/keycodes": "^3.58.0",
+		"@wordpress/notices": "^4.26.0",
+		"@wordpress/preferences": "^3.35.0",
+		"@wordpress/private-apis": "^0.40.0",
+		"@wordpress/rich-text": "^6.35.0",
+		"@wordpress/style-engine": "^1.41.0",
+		"@wordpress/token-list": "^2.58.0",
+		"@wordpress/url": "^3.59.0",
+		"@wordpress/warning": "^2.58.0",
+		"@wordpress/wordcount": "^3.58.0",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
 }

package/src/components/alignment-control/ui.js

@@ -45,7 +45,9 @@ function AlignmentUI( {
 	);
 
 	function setIcon() {
-		if ( activeAlignment ) return activeAlignment.icon;
+		if ( activeAlignment ) {
+			return activeAlignment.icon;
+		}
 		return isRTL() ? alignRight : alignLeft;
 	}
 

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

@@ -31,10 +31,12 @@ export default function BlockActions( {
 				getDirectInsertBlock,
 				canMoveBlocks,
 				canRemoveBlocks,
+				getBlockEditingMode,
 			} = select( blockEditorStore );
 
 			const blocks = getBlocksByClientId( clientIds );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+			const rootBlockEditingMode = getBlockEditingMode( rootClientId );
 			const canInsertDefaultBlock = canInsertBlockType(
 				getDefaultBlockName(),
 				rootClientId
@@ -46,7 +48,9 @@ export default function BlockActions( {
 			return {
 				canMove: canMoveBlocks( clientIds, rootClientId ),
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
-				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
+				canInsertBlock:
+					( canInsertDefaultBlock || !! directInsertBlock ) &&
+					rootBlockEditingMode === 'default',
 				canCopyStyles: blocks.every( ( block ) => {
 					return (
 						!! block &&

package/src/components/block-alignment-control/ui.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -85,7 +85,7 @@ function BlockAlignmentUI( {
 												key={ controlName }
 												icon={ icon }
 												iconPosition="left"
-												className={ classNames(
+												className={ clsx(
 													'components-dropdown-menu__menu-item',
 													{
 														'is-active': isSelected,

package/src/components/block-bindings-toolbar-indicator/style.scss

@@ -8,9 +8,6 @@
 	}
 }
 
-.edit-post-header__toolbar
-.selected-block-tools-wrapper
-.block-editor-block-toolbar
-.block-editor-block-bindings-toolbar-indicator {
+.editor-collapsible-block-toolbar .block-editor-block-bindings-toolbar-indicator {
 	height: 32px;
 }

package/src/components/block-canvas/style.scss

@@ -2,11 +2,9 @@ iframe[name="editor-canvas"] {
 	width: 100%;
 	height: 100%;
 	display: block;
+	background-color: $gray-300;
 }
 
-iframe[name="editor-canvas"]:not(.has-editor-padding) {
-	background-color: $white;
-}
 
 iframe[name="editor-canvas"].has-editor-padding {
 	padding: $grid-unit-30 $grid-unit-30 0;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -45,7 +45,7 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	return (
-		<div className={ classnames( 'block-editor-block-card', className ) }>
+		<div className={ clsx( 'block-editor-block-card', className ) }>
 			{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
 				<Button
 					onClick={ () => selectBlock( parentNavBlockClientId ) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 // diff doesn't tree-shake correctly, so we import from the individual
 // module here, to avoid including too much of the library
 import { diffChars } from 'diff/lib/diff/character';
@@ -28,7 +28,7 @@ function BlockCompare( {
 		const difference = diffChars( originalContent, newContent );
 
 		return difference.map( ( item, pos ) => {
-			const classes = classnames( {
+			const classes = clsx( {
 				'block-editor-block-compare__added': item.added,
 				'block-editor-block-compare__removed': item.removed,
 			} );

package/src/components/block-content-overlay/content.scss

@@ -1,46 +1,13 @@
 .block-editor-block-list__block.has-block-overlay {
 	cursor: default;
 
-	&::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: transparent;
-		border: none;
-		border-radius: $radius-block-ui;
-		z-index: z-index(".block-editor-block-list__block.has-block-overlay");
-	}
-
-	&:not(.is-multi-selected)::after {
-		content: none !important;
-	}
-
-	&:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
-	}
-
-	&.is-reusable:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before,
-	&.wp-block-template-part:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
-		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
-		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
-	}
-
-	&.is-selected:not(.is-dragging-blocks)::before {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
-	}
-
 	.block-editor-block-list__block {
 		pointer-events: none;
 	}
 
-	.block-editor-iframe__body.is-zoomed-out &::before {
-		// Unfortunately because of the vw unit, this is not always going to be exact
-		// When the scrollbar is visible, the frame exceeds the canvas by a few pixels.
-		width: calc(100vw);
-		left: calc(( 100% - 100vw ) / 2);
+	.block-editor-block-list__block.has-block-overlay::before {
+		left: 0;
+		right: 0;
+		width: auto;
 	}
 }

package/src/components/block-edit/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -75,7 +75,7 @@ const EditWithGeneratedProps = ( props ) => {
 	const generatedClassName = hasBlockSupport( blockType, 'className', true )
 		? getBlockDefaultClassName( name )
 		: null;
-	const className = classnames(
+	const className = clsx(
 		generatedClassName,
 		attributes.className,
 		props.className

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,7 @@ function BlockIcon( { icon, showColors = false, className, context } ) {
 	return (
 		<span
 			style={ style }
-			className={ classnames( 'block-editor-block-icon', className, {
+			className={ clsx( 'block-editor-block-icon', className, {
 				'has-colors': showColors,
 			} ) }
 		>

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -64,7 +64,7 @@ function mergeWrapperProps( propsA, propsB ) {
 		propsA?.hasOwnProperty( 'className' ) &&
 		propsB?.hasOwnProperty( 'className' )
 	) {
-		newProps.className = classnames( propsA.className, propsB.className );
+		newProps.className = clsx( propsA.className, propsB.className );
 	}
 
 	if (
@@ -177,7 +177,7 @@ function BlockListBlock( {
 	if ( isAligned ) {
 		blockEdit = (
 			<div
-				className={ classnames( 'wp-block', isSticky && className ) }
+				className={ clsx( 'wp-block', isSticky && className ) }
 				data-align={ wrapperProps[ 'data-align' ] }
 			>
 				{ blockEdit }
@@ -217,7 +217,7 @@ function BlockListBlock( {
 
 	const { 'data-align': dataAlign, ...restWrapperProps } = wrapperProps ?? {};
 
-	restWrapperProps.className = classnames(
+	restWrapperProps.className = clsx(
 		restWrapperProps.className,
 		dataAlign && themeSupportsLayout && `align${ dataAlign }`,
 		! ( dataAlign && isSticky ) && className
@@ -534,7 +534,6 @@ function BlockListBlockProvider( props ) {
 				hasSelectedInnerBlock,
 
 				getBlockIndex,
-				isTyping,
 				isBlockMultiSelected,
 				isBlockSubtreeDisabled,
 				isBlockHighlighted,
@@ -566,11 +565,8 @@ function BlockListBlockProvider( props ) {
 			const attributes = getBlockAttributes( clientId );
 			const { name: blockName, isValid } = blockWithoutAttributes;
 			const blockType = getBlockType( blockName );
-			const {
-				outlineMode,
-				supportsLayout,
-				__unstableIsPreviewMode: isPreviewMode,
-			} = getSettings();
+			const { supportsLayout, __unstableIsPreviewMode: isPreviewMode } =
+				getSettings();
 			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 			const previewContext = {
 				isPreviewMode,
@@ -606,7 +602,6 @@ function BlockListBlockProvider( props ) {
 				clientId,
 				checkDeep
 			);
-			const typing = isTyping();
 			const movingClientId = hasBlockMovingClientId();
 			const blockEditingMode = getBlockEditingMode( clientId );
 
@@ -639,7 +634,6 @@ function BlockListBlockProvider( props ) {
 				isSubtreeDisabled:
 					blockEditingMode === 'disabled' &&
 					isBlockSubtreeDisabled( clientId ),
-				isOutlineEnabled: outlineMode,
 				hasOverlay:
 					__unstableHasActiveBlockOverlayActive( clientId ) &&
 					! isDragging(),
@@ -657,7 +651,6 @@ function BlockListBlockProvider( props ) {
 					! __unstableSelectionHasUnmergeableBlock(),
 				isDragging: isBlockBeingDragged( clientId ),
 				hasChildSelected: isAncestorOfSelectedBlock,
-				removeOutline: _isSelected && outlineMode && typing,
 				isBlockMovingMode: !! movingClientId,
 				canInsertMovingBlock:
 					movingClientId &&
@@ -697,7 +690,6 @@ function BlockListBlockProvider( props ) {
 		blockApiVersion,
 		blockTitle,
 		isSubtreeDisabled,
-		isOutlineEnabled,
 		hasOverlay,
 		initialPosition,
 		isHighlighted,
@@ -706,7 +698,6 @@ function BlockListBlockProvider( props ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		removeOutline,
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		templateLock,
@@ -743,7 +734,6 @@ function BlockListBlockProvider( props ) {
 		blockTitle,
 		isSelected,
 		isSubtreeDisabled,
-		isOutlineEnabled,
 		hasOverlay,
 		initialPosition,
 		blockEditingMode,
@@ -753,7 +743,6 @@ function BlockListBlockProvider( props ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		removeOutline,
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		templateLock,

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Pressable, View } from 'react-native';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -73,7 +73,7 @@ function mergeWrapperProps( propsA, propsB ) {
 		propsA?.hasOwnProperty( 'className' ) &&
 		propsB?.hasOwnProperty( 'className' )
 	) {
-		newProps.className = classnames( propsA.className, propsB.className );
+		newProps.className = clsx( propsA.className, propsB.className );
 	}
 
 	if (

package/src/components/block-list/content.scss

@@ -17,13 +17,26 @@
 	}
 }
 
+@mixin selectedOutline() {
+	content: "";
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	outline-color: var(--wp-admin-theme-color);
+	outline-style: solid;
+	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+	outline-offset: calc((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+}
 
 // Hide selections on this element, otherwise Safari will include it stacked
 // under your actual selection.
 // This uses a CSS hack to show the rules to Safari only. Failing here is okay,
 // it just makes the selection indication slightly less precise. That makes this
-// hack a progressive enhancement. Stylelint is disabled to allow the hack to work.
-/* stylelint-disable */
+// hack a progressive enhancement.
+/* stylelint-disable -- Stylelint is disabled to allow the hack to work. */
 _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
 _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
 	background-color: transparent;
@@ -39,12 +52,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	position: relative;
 
 	// Block multi selection
-	// Apply a rounded radius to the entire block when multi selected, but with low specificity
-	// so explicit radii set by tools are preserved.
-	&:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
-		border-radius: $radius-block-ui;
-	}
-
 	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
 		// Hide the native selection indicator, for the selection, and children.
 		&::selection,
@@ -64,7 +71,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 			left: 0;
 			background: var(--wp-admin-theme-color);
 			opacity: 0.4;
-			border-radius: $radius-block-ui;
 
 			// Animate.
 			animation: selection-overlay__fade-in-animation 0.1s ease-out;
@@ -77,7 +83,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 		// Don't show the highlight focus style when multi selected.
 		&.is-highlighted::after {
-			box-shadow: none;
+			outline-color: transparent;
 		}
 	}
 
@@ -95,21 +101,12 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		// We're using a pseudo element to overflow placeholder borders
 		// and any border inside the block itself.
 		&::after {
-			content: "";
-			position: absolute;
+			@include selectedOutline();
 			z-index: 1;
-			pointer-events: none;
-			top: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			left: $border-width;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
-			outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
 
 			// Show a light color for dark themes.
 			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+				outline-color: $dark-theme-focus;
 			}
 		}
 	}
@@ -183,6 +180,14 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		user-select: none;
 	}
 
+	&.has-negative-margin {
+		&.is-selected,
+		&.has-child-selected {
+			// Bring the selected block forward so we can see it.
+			z-index: z-index(".block-editor-block-list__block.is-selected");
+		}
+	}
+
 	.reusable-block-edit-panel * {
 		z-index: z-index(".block-editor-block-list__block .reusable-block-edit-panel *");
 	}
@@ -263,21 +268,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 }
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
-	&.is-hovered {
-		cursor: default;
-
-		&::after {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width;
-		}
-	}
 
 	&.is-selected {
 		cursor: default;
@@ -285,17 +275,35 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		&.rich-text {
 			cursor: unset;
 		}
+	}
+
+	&.is-hovered:not(.is-selected),
+	&:not(.rich-text):not([contenteditable="true"]).is-selected {
+
+		&::after {
+			@include selectedOutline();
+		}
+	}
+}
+
+// Colorize outlines for template parts and synced patterns (.is-reusable).
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
 
+	&.is-hovered::after,
+	&.is-selected::after,
+	&.is-highlighted::after {
+		outline-color: var(--wp-block-synced-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui;
+			outline-color: var(--wp-block-synced-color);
+
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				outline-color: $dark-theme-focus;
+			}
 		}
 	}
 }
@@ -328,7 +336,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	animation-timing-function: ease-out;
 	animation-delay: 0.1s;
 	animation-fill-mode: backwards;
-	border-radius: $radius-block-ui;
 	bottom: 0;
 	content: "";
 	left: 0;
@@ -377,22 +384,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	z-index: z-index("{core/image aligned left or right} .wp-block");
 }
 
-body.is-zoomed-out {
-	display: flex;
-	flex-direction: column;
-
-	> .is-root-container {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-
-		> main {
-			flex: 1;
-		}
-	}
-}
-
 .wp-site-blocks > [data-align="left"] {
 	float: left;
 	margin-right: 2em;
@@ -485,13 +476,3 @@ body.is-zoomed-out {
 		margin-bottom: auto;
 	}
 }
-
-.block-editor-iframe__html {
-	transform-origin: top center;
-	transition: all 0.3s;
-	@include reduce-motion("transition");
-}
-
-.block-editor-iframe__html[style*="scale"] {
-	background-color: $gray-300;
-}