@wordpress/block-editor 14.16.0 → 14.18.0

package/build-style/style.css

@@ -319,12 +319,14 @@ iframe[name=editor-canvas] {
   margin-bottom: 1.5em;
 }
 .block-editor-block-inspector .components-base-control:where(:not(:last-child)),
-.block-editor-block-inspector .components-radio-control:where(:not(:last-child)) {
+.block-editor-block-inspector .components-radio-control:where(:not(:last-child)),
+.block-editor-block-inspector .block-editor-html-element-control:where(:not(:last-child)) {
   margin-bottom: 16px;
 }
 .block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
 .block-editor-block-inspector .components-query-controls .components-base-control,
-.block-editor-block-inspector .components-range-control .components-base-control {
+.block-editor-block-inspector .components-range-control .components-base-control,
+.block-editor-block-inspector .block-editor-html-element-control .components-base-control {
   margin-bottom: 0;
 }
 .block-editor-block-inspector .components-panel__body {
@@ -3030,6 +3032,10 @@ iframe[name=editor-canvas] {
     width: 300px;
   }
 }
+.block-editor-media-placeholder__url-input-form input {
+  /* rtl:ignore */
+  direction: ltr;
+}
 
 .modal-open .block-editor-media-replace-flow__options {
   display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.16.0",
+	"version": "14.18.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,38 +37,38 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.21.0",
-		"@wordpress/api-fetch": "^7.21.0",
-		"@wordpress/blob": "^4.21.0",
-		"@wordpress/block-serialization-default-parser": "^5.21.0",
-		"@wordpress/blocks": "^14.10.0",
-		"@wordpress/commands": "^1.21.0",
-		"@wordpress/components": "^29.7.0",
-		"@wordpress/compose": "^7.21.0",
-		"@wordpress/data": "^10.21.0",
-		"@wordpress/date": "^5.21.0",
-		"@wordpress/deprecated": "^4.21.0",
-		"@wordpress/dom": "^4.21.0",
-		"@wordpress/element": "^6.21.0",
-		"@wordpress/escape-html": "^3.21.0",
-		"@wordpress/hooks": "^4.21.0",
-		"@wordpress/html-entities": "^4.21.0",
-		"@wordpress/i18n": "^5.21.0",
-		"@wordpress/icons": "^10.21.0",
-		"@wordpress/is-shallow-equal": "^5.21.0",
-		"@wordpress/keyboard-shortcuts": "^5.21.0",
-		"@wordpress/keycodes": "^4.21.0",
-		"@wordpress/notices": "^5.21.0",
-		"@wordpress/preferences": "^4.21.0",
-		"@wordpress/priority-queue": "^3.21.0",
-		"@wordpress/private-apis": "^1.21.0",
-		"@wordpress/rich-text": "^7.21.0",
-		"@wordpress/style-engine": "^2.21.0",
-		"@wordpress/token-list": "^3.21.0",
-		"@wordpress/upload-media": "^0.6.0",
-		"@wordpress/url": "^4.21.0",
-		"@wordpress/warning": "^3.21.0",
-		"@wordpress/wordcount": "^4.21.0",
+		"@wordpress/a11y": "^4.23.0",
+		"@wordpress/api-fetch": "^7.23.0",
+		"@wordpress/blob": "^4.23.0",
+		"@wordpress/block-serialization-default-parser": "^5.23.0",
+		"@wordpress/blocks": "^14.12.0",
+		"@wordpress/commands": "^1.23.0",
+		"@wordpress/components": "^29.9.0",
+		"@wordpress/compose": "^7.23.0",
+		"@wordpress/data": "^10.23.0",
+		"@wordpress/date": "^5.23.0",
+		"@wordpress/deprecated": "^4.23.0",
+		"@wordpress/dom": "^4.23.0",
+		"@wordpress/element": "^6.23.0",
+		"@wordpress/escape-html": "^3.23.0",
+		"@wordpress/hooks": "^4.23.0",
+		"@wordpress/html-entities": "^4.23.0",
+		"@wordpress/i18n": "^5.23.0",
+		"@wordpress/icons": "^10.23.0",
+		"@wordpress/is-shallow-equal": "^5.23.0",
+		"@wordpress/keyboard-shortcuts": "^5.23.0",
+		"@wordpress/keycodes": "^4.23.0",
+		"@wordpress/notices": "^5.23.0",
+		"@wordpress/preferences": "^4.23.0",
+		"@wordpress/priority-queue": "^3.23.0",
+		"@wordpress/private-apis": "^1.23.0",
+		"@wordpress/rich-text": "^7.23.0",
+		"@wordpress/style-engine": "^2.23.0",
+		"@wordpress/token-list": "^3.23.0",
+		"@wordpress/upload-media": "^0.8.0",
+		"@wordpress/url": "^4.23.0",
+		"@wordpress/warning": "^3.23.0",
+		"@wordpress/wordcount": "^4.23.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "104af00f9abcd7a4d36b87e648f148c72cc4ea5f"
+	"gitHead": "ab5c79cd40adbb68898536c50e035b0a734338ea"
 }

package/src/components/background-image-control/index.js

@@ -17,7 +17,6 @@ import {
 	FocalPointPicker,
 	MenuItem,
 	VisuallyHidden,
-	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 	Dropdown,
@@ -119,13 +118,16 @@ function InspectorImagePreviewItem( {
 	className,
 	onToggleCallback = noop,
 } ) {
+	const { isOpen, ...restToggleProps } = toggleProps;
+
 	useEffect( () => {
-		if ( typeof toggleProps?.isOpen !== 'undefined' ) {
-			onToggleCallback( toggleProps?.isOpen );
+		if ( typeof isOpen !== 'undefined' ) {
+			onToggleCallback( isOpen );
 		}
-	}, [ toggleProps?.isOpen, onToggleCallback ] );
-	return (
-		<ItemGroup as={ as } className={ className } { ...toggleProps }>
+	}, [ isOpen, onToggleCallback ] );
+
+	const renderPreviewContent = () => {
+		return (
 			<HStack
 				justify="flex-start"
 				as="span"
@@ -162,7 +164,20 @@ function InspectorImagePreviewItem( {
 					</VisuallyHidden>
 				</FlexItem>
 			</HStack>
-		</ItemGroup>
+		);
+	};
+
+	return as === 'button' ? (
+		<Button
+			__next40pxDefaultSize
+			className={ className }
+			{ ...restToggleProps }
+			aria-expanded={ isOpen }
+		>
+			{ renderPreviewContent() }
+		</Button>
+	) : (
+		renderPreviewContent()
 	);
 }
 

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

@@ -56,8 +56,7 @@ export function ExperimentalBlockCanvas( {
 		return (
 			<BlockTools
 				__unstableContentRef={ localRef }
-				className="block-editor-block-canvas"
-				style={ { height } }
+				style={ { height, display: 'flex' } }
 			>
 				<EditorStyles
 					styles={ styles }
@@ -68,6 +67,10 @@ export function ExperimentalBlockCanvas( {
 					ref={ contentRef }
 					className="editor-styles-wrapper"
 					tabIndex={ -1 }
+					style={ {
+						height: '100%',
+						width: '100%',
+					} }
 				>
 					{ children }
 				</WritingFlow>
@@ -78,7 +81,6 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
-			className="block-editor-block-canvas"
 			style={ { height, display: 'flex' } }
 		>
 			<Iframe

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

@@ -11,7 +11,8 @@
 	}
 
 	.components-base-control,
-	.components-radio-control {
+	.components-radio-control,
+	.block-editor-html-element-control {
 		&:where(:not(:last-child)) {
 			margin-bottom: $grid-unit-20;
 		}
@@ -20,7 +21,8 @@
 	// Reset unwanted margin-bottom from being applied to BaseControls within certain components.
 	.components-focal-point-picker-control,
 	.components-query-controls,
-	.components-range-control {
+	.components-range-control,
+	.block-editor-html-element-control {
 		.components-base-control {
 			margin-bottom: 0;
 		}

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

@@ -262,15 +262,19 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 	// Do not add new properties here, use `useDispatch` instead to avoid
 	// leaking new props to the public API (editor.BlockListBlock filter).
 	return {
-		setAttributes( newAttributes ) {
+		setAttributes( nextAttributes ) {
 			const { getMultiSelectedBlockClientIds } =
 				registry.select( blockEditorStore );
 			const multiSelectedBlockClientIds =
 				getMultiSelectedBlockClientIds();
-			const { clientId } = ownProps;
+			const { clientId, attributes } = ownProps;
 			const clientIds = multiSelectedBlockClientIds.length
 				? multiSelectedBlockClientIds
 				: [ clientId ];
+			const newAttributes =
+				typeof nextAttributes === 'function'
+					? nextAttributes( attributes )
+					: nextAttributes;
 
 			updateBlockAttributes( clientIds, newAttributes );
 		},

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

@@ -365,6 +365,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	border: none;
 	outline: none;
 	border-radius: $radius-small;
+	box-sizing: border-box;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	resize: none;
 	overflow: hidden;

package/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js

@@ -41,12 +41,15 @@ function restore( node ) {
 
 function down( event ) {
 	const { target } = event;
-	const { ownerDocument, isContentEditable } = target;
+	const { ownerDocument, isContentEditable, tagName } = target;
+	const isInputOrTextArea = [ 'INPUT', 'TEXTAREA' ].includes( tagName );
+
 	const nodes = nodesByDocument.get( ownerDocument );
 
-	if ( isContentEditable ) {
-		// Whenever an editable element is clicked, check which draggable
-		// blocks contain this element, and temporarily disable draggability.
+	if ( isContentEditable || isInputOrTextArea ) {
+		// Whenever an editable element or an input or textarea is clicked,
+		// check which draggable blocks contain this element, and temporarily
+		// disable draggability.
 		for ( const node of nodes ) {
 			if (
 				node.getAttribute( 'draggable' ) === 'true' &&
@@ -57,8 +60,8 @@ function down( event ) {
 			}
 		}
 	} else {
-		// Whenever a non-editable element is clicked, re-enable draggability
-		// for any blocks that were previously disabled.
+		// Whenever a non-editable element or an input or textarea is clicked,
+		// re-enable draggability for any blocks that were previously disabled.
 		for ( const node of nodes ) {
 			restore( node );
 		}
@@ -66,11 +69,11 @@ function down( event ) {
 }
 
 /**
- * In Firefox, the `draggable` and `contenteditable` attributes don't play well
- * together. When `contenteditable` is within a `draggable` element, selection
- * doesn't get set in the right place. The only solution is to temporarily
- * remove the `draggable` attribute clicking inside `contenteditable` elements.
- *
+ * In Firefox, the `draggable` and `contenteditable` or `input` or `textarea`
+ * elements don't play well together. When these elements are within a
+ * `draggable` element, selection doesn't get set in the right place. The only
+ * solution is to temporarily remove the `draggable` attribute clicking inside
+ * these elements.
  * @return {Function} Cleanup function.
  */
 export function useFirefoxDraggableCompatibility() {

package/src/components/block-settings-menu/block-mode-toggle.js

@@ -14,7 +14,7 @@ import { store as blockEditorStore } from '../../store';
 const noop = () => {};
 
 export default function BlockModeToggle( { clientId, onToggle = noop } ) {
-	const { blockType, mode, isCodeEditingEnabled } = useSelect(
+	const { blockType, mode, enabled } = useSelect(
 		( select ) => {
 			const { getBlock, getBlockMode, getSettings } =
 				select( blockEditorStore );
@@ -23,7 +23,7 @@ export default function BlockModeToggle( { clientId, onToggle = noop } ) {
 			return {
 				mode: getBlockMode( clientId ),
 				blockType: block ? getBlockType( block.name ) : null,
-				isCodeEditingEnabled: getSettings().codeEditingEnabled,
+				enabled: getSettings().codeEditingEnabled && !! block?.isValid,
 			};
 		},
 		[ clientId ]
@@ -33,7 +33,7 @@ export default function BlockModeToggle( { clientId, onToggle = noop } ) {
 	if (
 		! blockType ||
 		! hasBlockSupport( blockType, 'html', true ) ||
-		! isCodeEditingEnabled
+		! enabled
 	) {
 		return null;
 	}

package/src/components/block-settings-menu/test/block-mode-toggle.js

@@ -20,7 +20,7 @@ function setupUseSelectMock( mode, blockType, codeEditingEnabled = true ) {
 		return {
 			mode,
 			blockType,
-			isCodeEditingEnabled: codeEditingEnabled,
+			enabled: codeEditingEnabled,
 		};
 	} );
 }

package/src/components/block-toolbar/use-has-block-toolbar.js

@@ -14,7 +14,7 @@ import { store as blockEditorStore } from '../../store';
  * @return {boolean} Whether the block toolbar component will be rendered.
  */
 export function useHasBlockToolbar() {
-	const { isToolbarEnabled, isBlockDisabled } = useSelect( ( select ) => {
+	const enabled = useSelect( ( select ) => {
 		const { getBlockEditingMode, getBlockName, getBlockSelectionStart } =
 			select( blockEditorStore );
 
@@ -27,18 +27,12 @@ export function useHasBlockToolbar() {
 			selectedBlockClientId &&
 			getBlockType( getBlockName( selectedBlockClientId ) );
 
-		return {
-			isToolbarEnabled:
-				blockType &&
-				hasBlockSupport( blockType, '__experimentalToolbar', true ),
-			isBlockDisabled:
-				getBlockEditingMode( selectedBlockClientId ) === 'disabled',
-		};
+		return (
+			blockType &&
+			hasBlockSupport( blockType, '__experimentalToolbar', true ) &&
+			getBlockEditingMode( selectedBlockClientId ) !== 'disabled'
+		);
 	}, [] );
 
-	if ( ! isToolbarEnabled || isBlockDisabled ) {
-		return false;
-	}
-
-	return true;
+	return enabled;
 }

package/src/components/block-tools/use-show-block-tools.js

@@ -25,6 +25,7 @@ export function useShowBlockTools() {
 			getSettings,
 			__unstableGetEditorMode,
 			isTyping,
+			isBlockInterfaceHidden,
 		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
@@ -45,6 +46,7 @@ export function useShowBlockTools() {
 			editorMode !== 'navigation' &&
 			isEmptyDefaultBlock;
 		const _showBlockToolbarPopover =
+			! isBlockInterfaceHidden() &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&

package/src/components/child-layout-control/index.js

@@ -188,6 +188,7 @@ function FlexControls( {
 						} );
 					} }
 					value={ flexSize }
+					min={ 0 }
 					label={ flexResetLabel }
 					hideLabelFromVision
 				/>

package/src/components/html-element-control/index.js

@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	SelectControl,
+	Notice,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { htmlElementMessages } from './messages';
+
+/**
+ * Renders a SelectControl for choosing HTML elements with validation
+ * to prevent duplicate <main> elements.
+ *
+ * @param {Object}   props          Component props.
+ * @param {string}   props.tagName  The current HTML tag name.
+ * @param {Function} props.onChange Function to call when the tag is changed.
+ * @param {string}   props.clientId The client ID of the current block.
+ * @param {Array}    props.options  SelectControl options (optional).
+ *
+ * @return {Component} The HTML element select control with validation.
+ */
+export default function HTMLElementControl( {
+	tagName,
+	onChange,
+	clientId,
+	options = [
+		{ label: __( 'Default (<div>)' ), value: 'div' },
+		{ label: '<header>', value: 'header' },
+		{ label: '<main>', value: 'main' },
+		{ label: '<section>', value: 'section' },
+		{ label: '<article>', value: 'article' },
+		{ label: '<aside>', value: 'aside' },
+		{ label: '<footer>', value: 'footer' },
+	],
+} ) {
+	const checkForMainTag =
+		!! clientId && options.some( ( option ) => option.value === 'main' );
+
+	const hasMainElementElsewhere = useSelect(
+		( select ) => {
+			if ( ! checkForMainTag ) {
+				return false;
+			}
+
+			const { getClientIdsWithDescendants, getBlockAttributes } =
+				select( blockEditorStore );
+
+			return getClientIdsWithDescendants().some( ( id ) => {
+				// Skip the current block.
+				if ( id === clientId ) {
+					return false;
+				}
+
+				return getBlockAttributes( id )?.tagName === 'main';
+			} );
+		},
+		[ clientId, checkForMainTag ]
+	);
+
+	// Create a modified options array that disables the main option if needed.
+	const modifiedOptions = options.map( ( option ) => {
+		if (
+			option.value === 'main' &&
+			hasMainElementElsewhere &&
+			tagName !== 'main'
+		) {
+			return {
+				...option,
+				disabled: true,
+				label: sprintf(
+					/* translators: %s: HTML element name */
+					__( '%s (Already in use)' ),
+					option.label
+				),
+			};
+		}
+		return option;
+	} );
+
+	return (
+		<VStack spacing={ 2 } className="block-editor-html-element-control">
+			<SelectControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				label={ __( 'HTML element' ) }
+				options={ modifiedOptions }
+				value={ tagName }
+				onChange={ onChange }
+				help={ htmlElementMessages[ tagName ] }
+			/>
+
+			{ tagName === 'main' && hasMainElementElsewhere && (
+				<Notice status="warning" isDismissible={ false }>
+					{ __(
+						'Multiple <main> elements detected. The duplicate may be in your content or template. This is not valid HTML and may cause accessibility issues. Please change this HTML element.'
+					) }
+				</Notice>
+			) }
+		</VStack>
+	);
+}

package/src/components/html-element-control/messages.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Messages providing helpful descriptions for HTML elements.
+ */
+export const htmlElementMessages = {
+	article: __(
+		'The <article> element should represent a self-contained, syndicatable portion of the document.'
+	),
+	aside: __(
+		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+	),
+	div: __(
+		'The <div> element should only be used if the block is a design element with no semantic meaning.'
+	),
+	footer: __(
+		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+	),
+	header: __(
+		'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+	),
+	main: __(
+		'The <main> element should be used for the primary content of your document only.'
+	),
+	nav: __(
+		'The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'
+	),
+	section: __(
+		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+	),
+};

package/src/components/inserter/media-tab/media-preview.js

@@ -36,7 +36,6 @@ import { getBlockAndPreviewFromMedia } from './utils';
 import { store as blockEditorStore } from '../../../store';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
-const MAXIMUM_TITLE_LENGTH = 25;
 const MEDIA_OPTIONS_POPOVER_PROPS = {
 	position: 'bottom left',
 	className:
@@ -239,12 +238,6 @@ export function MediaPreview( { media, onClick, category } ) {
 			? media.title
 			: media.title?.rendered || __( 'no title' );
 
-	let truncatedTitle;
-	if ( title.length > MAXIMUM_TITLE_LENGTH ) {
-		const omission = '...';
-		truncatedTitle =
-			title.slice( 0, MAXIMUM_TITLE_LENGTH - omission.length ) + omission;
-	}
 	const onMouseEnter = useCallback( () => setIsHovered( true ), [] );
 	const onMouseLeave = useCallback( () => setIsHovered( false ), [] );
 	return (
@@ -268,7 +261,7 @@ export function MediaPreview( { media, onClick, category } ) {
 							onMouseEnter={ onMouseEnter }
 							onMouseLeave={ onMouseLeave }
 						>
-							<Tooltip text={ truncatedTitle || title }>
+							<Tooltip text={ title }>
 								<Composite.Item
 									render={
 										<div

package/src/components/keyboard-shortcuts/index.js

@@ -59,8 +59,8 @@ function KeyboardShortcutsRegister() {
 			category: 'block',
 			description: __( 'Remove the selected block(s).' ),
 			keyCombination: {
-				modifier: 'primaryShift',
-				character: 'backspace',
+				modifier: 'access',
+				character: 'z',
 			},
 		} );
 

package/src/components/link-control/index.js

@@ -501,7 +501,7 @@ function LinkControl( {
 LinkControl.ViewerFill = ViewerFill;
 LinkControl.DEFAULT_LINK_SETTINGS = DEFAULT_LINK_SETTINGS;
 
-export const DeprecatedExperimentalLinkControl = ( props ) => {
+const DeprecatedExperimentalLinkControl = ( props ) => {
 	deprecated( 'wp.blockEditor.__experimentalLinkControl', {
 		since: '6.8',
 		alternative: 'wp.blockEditor.LinkControl',
@@ -510,4 +510,9 @@ export const DeprecatedExperimentalLinkControl = ( props ) => {
 	return <LinkControl { ...props } />;
 };
 
+DeprecatedExperimentalLinkControl.ViewerFill = LinkControl.ViewerFill;
+DeprecatedExperimentalLinkControl.DEFAULT_LINK_SETTINGS =
+	LinkControl.DEFAULT_LINK_SETTINGS;
+
+export { DeprecatedExperimentalLinkControl };
 export default LinkControl;

package/src/components/media-placeholder/index.js

@@ -47,7 +47,7 @@ const InsertFromURLPopover = ( {
 			<InputControl
 				__next40pxDefaultSize
 				label={ __( 'URL' ) }
-				type="url"
+				type="text" // Use text instead of URL to allow relative paths (e.g., /image/image.jpg)
 				hideLabelFromVision
 				placeholder={ __( 'Paste or type URL' ) }
 				onChange={ onChange }

package/src/components/media-placeholder/style.scss

@@ -4,4 +4,10 @@
 	@include break-small() {
 		width: 300px;
 	}
+
+	input {
+		// Targeting input as we're using text instead of URLs for relative paths.
+		/* rtl:ignore */
+		direction: ltr;
+	}
 }

package/src/components/rich-text/event-listeners/delete.js

@@ -6,7 +6,7 @@ import { isCollapsed, isEmpty } from '@wordpress/rich-text';
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
-		const { keyCode, shiftKey, ctrlKey, metaKey } = event;
+		const { keyCode } = event;
 
 		if ( event.defaultPrevented ) {
 			return;
@@ -30,11 +30,6 @@ export default ( props ) => ( element ) => {
 				return;
 			}
 
-			// Exclude (command|ctrl)+shift+backspace as they are shortcuts for deleting blocks.
-			if ( shiftKey && ( ctrlKey || metaKey ) ) {
-				return;
-			}
-
 			if ( onMerge ) {
 				onMerge( ! isReverse );
 			}

package/src/components/use-resize-canvas/index.js

@@ -60,7 +60,7 @@ export default function useResizeCanvas( deviceType ) {
 					marginLeft: marginHorizontal,
 					marginRight: marginHorizontal,
 					height,
-					maxWidth: '100%',
+					overflowY: 'auto',
 				};
 			default:
 				return {