@wordpress/block-editor 9.4.0 → 9.5.0

package/build-style/style-rtl.css

@@ -177,7 +177,7 @@
   cursor: default;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
+.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 {
   position: absolute;
@@ -193,13 +193,13 @@
   outline: 2px solid transparent;
 }
 .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
+.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.is-navigate-mode .block-editor-block-list__block.is-selected .components-placeholder ::selection, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable]) .components-placeholder ::selection,
+.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-highlighted .components-placeholder ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection {
   background: transparent;
@@ -709,6 +709,15 @@
   border-radius: 2px;
 }
 
+.block-editor-block-lock-modal__template-lock {
+  border-top: 1px solid #ddd;
+  margin-top: 16px;
+  padding: 12px 0;
+}
+.block-editor-block-lock-modal__template-lock .components-base-control__field {
+  margin: 0;
+}
+
 .block-editor-block-lock-modal__actions {
   margin-top: 24px;
 }
@@ -1434,6 +1443,8 @@
   display: block;
   width: 100%;
   padding: 32px;
+  padding-bottom: 0;
+  padding-top: 0;
   column-count: 2;
 }
 @media (min-width: 1440px) {
@@ -1465,7 +1476,8 @@
   text-align: right;
   margin: 0;
   color: #1e1e1e;
-  border-radius: 2px 2px 0 0;
+  position: absolute;
+  bottom: 0;
   background-color: #fff;
   display: flex;
   flex-direction: row;
@@ -1531,7 +1543,6 @@
 .block-editor-block-pattern-setup__carousel,
 .block-editor-block-pattern-setup__grid {
   width: 100%;
-  overflow-y: auto;
 }
 
 .block-editor-block-variation-transforms {
@@ -1721,6 +1732,10 @@
   width: 100%;
 }
 
+.block-editor-color-gradient-control__tab-panel {
+  padding-top: 8px;
+}
+
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
 }
@@ -2548,7 +2563,7 @@
   align-items: center;
   width: 100%;
   height: auto;
-  padding: 6px 0 6px 12px;
+  padding: 6px 0 6px 4px;
   text-align: right;
   color: #1e1e1e;
   border-radius: 2px;
@@ -2666,7 +2681,7 @@
   padding: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell {
-  padding-left: 5px;
+  padding-left: 4px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon {
   height: 24px;
@@ -2740,13 +2755,24 @@
 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
   color: #fff;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper {
+  min-width: 120px;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__title {
+  flex: 1;
+  position: relative;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__title .components-truncate {
+  position: absolute;
+  width: 100%;
+  transform: translateY(-50%);
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   display: inline-block;
   padding: 2px 6px;
-  margin: 0 8px;
-  max-width: 120px;
+  max-width: min(100px, 40%);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -4067,7 +4093,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .block-editor-block-patterns-explorer__sidebar {
   position: absolute;
-  top: 60px;
+  top: 76px;
   right: 0;
   bottom: 0;
   width: 280px;

package/build-style/style.css

@@ -177,7 +177,7 @@
   cursor: default;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
+.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 {
   position: absolute;
@@ -193,13 +193,13 @@
   outline: 2px solid transparent;
 }
 .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
+.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.is-navigate-mode .block-editor-block-list__block.is-selected .components-placeholder ::selection, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable]) .components-placeholder ::selection,
+.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-highlighted .components-placeholder ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection {
   background: transparent;
@@ -709,6 +709,15 @@
   border-radius: 2px;
 }
 
+.block-editor-block-lock-modal__template-lock {
+  border-top: 1px solid #ddd;
+  margin-top: 16px;
+  padding: 12px 0;
+}
+.block-editor-block-lock-modal__template-lock .components-base-control__field {
+  margin: 0;
+}
+
 .block-editor-block-lock-modal__actions {
   margin-top: 24px;
 }
@@ -1434,6 +1443,8 @@
   display: block;
   width: 100%;
   padding: 32px;
+  padding-bottom: 0;
+  padding-top: 0;
   column-count: 2;
 }
 @media (min-width: 1440px) {
@@ -1465,7 +1476,8 @@
   text-align: left;
   margin: 0;
   color: #1e1e1e;
-  border-radius: 2px 2px 0 0;
+  position: absolute;
+  bottom: 0;
   background-color: #fff;
   display: flex;
   flex-direction: row;
@@ -1531,7 +1543,6 @@
 .block-editor-block-pattern-setup__carousel,
 .block-editor-block-pattern-setup__grid {
   width: 100%;
-  overflow-y: auto;
 }
 
 .block-editor-block-variation-transforms {
@@ -1721,6 +1732,10 @@
   width: 100%;
 }
 
+.block-editor-color-gradient-control__tab-panel {
+  padding-top: 8px;
+}
+
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
 }
@@ -2548,7 +2563,7 @@
   align-items: center;
   width: 100%;
   height: auto;
-  padding: 6px 12px 6px 0;
+  padding: 6px 4px 6px 0;
   text-align: left;
   color: #1e1e1e;
   border-radius: 2px;
@@ -2666,7 +2681,7 @@
   padding: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell {
-  padding-right: 5px;
+  padding-right: 4px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon {
   height: 24px;
@@ -2740,13 +2755,24 @@
 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
   color: #fff;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper {
+  min-width: 120px;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__title {
+  flex: 1;
+  position: relative;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__title .components-truncate {
+  position: absolute;
+  width: 100%;
+  transform: translateY(-50%);
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   display: inline-block;
   padding: 2px 6px;
-  margin: 0 8px;
-  max-width: 120px;
+  max-width: min(100px, 40%);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -4067,7 +4093,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .block-editor-block-patterns-explorer__sidebar {
   position: absolute;
-  top: 60px;
+  top: 76px;
   left: 0;
   bottom: 0;
   width: 280px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.4.0",
+	"version": "9.5.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.12.0",
-		"@wordpress/api-fetch": "^6.9.0",
-		"@wordpress/blob": "^3.12.0",
-		"@wordpress/blocks": "^11.11.0",
-		"@wordpress/components": "^19.14.0",
-		"@wordpress/compose": "^5.10.0",
-		"@wordpress/data": "^6.12.0",
-		"@wordpress/date": "^4.12.0",
-		"@wordpress/deprecated": "^3.12.0",
-		"@wordpress/dom": "^3.12.0",
-		"@wordpress/element": "^4.10.0",
-		"@wordpress/hooks": "^3.12.0",
-		"@wordpress/html-entities": "^3.12.0",
-		"@wordpress/i18n": "^4.12.0",
-		"@wordpress/icons": "^9.3.0",
-		"@wordpress/is-shallow-equal": "^4.12.0",
-		"@wordpress/keyboard-shortcuts": "^3.10.0",
-		"@wordpress/keycodes": "^3.12.0",
-		"@wordpress/notices": "^3.12.0",
-		"@wordpress/rich-text": "^5.10.0",
-		"@wordpress/shortcode": "^3.12.0",
-		"@wordpress/style-engine": "^0.11.0",
-		"@wordpress/token-list": "^2.12.0",
-		"@wordpress/url": "^3.13.0",
-		"@wordpress/warning": "^2.12.0",
-		"@wordpress/wordcount": "^3.12.0",
+		"@wordpress/a11y": "^3.13.0",
+		"@wordpress/api-fetch": "^6.10.0",
+		"@wordpress/blob": "^3.13.0",
+		"@wordpress/blocks": "^11.12.0",
+		"@wordpress/components": "^19.15.0",
+		"@wordpress/compose": "^5.11.0",
+		"@wordpress/data": "^6.13.0",
+		"@wordpress/date": "^4.13.0",
+		"@wordpress/deprecated": "^3.13.0",
+		"@wordpress/dom": "^3.13.0",
+		"@wordpress/element": "^4.11.0",
+		"@wordpress/hooks": "^3.13.0",
+		"@wordpress/html-entities": "^3.13.0",
+		"@wordpress/i18n": "^4.13.0",
+		"@wordpress/icons": "^9.4.0",
+		"@wordpress/is-shallow-equal": "^4.13.0",
+		"@wordpress/keyboard-shortcuts": "^3.11.0",
+		"@wordpress/keycodes": "^3.13.0",
+		"@wordpress/notices": "^3.13.0",
+		"@wordpress/rich-text": "^5.11.0",
+		"@wordpress/shortcode": "^3.13.0",
+		"@wordpress/style-engine": "^0.12.0",
+		"@wordpress/token-list": "^2.13.0",
+		"@wordpress/url": "^3.14.0",
+		"@wordpress/warning": "^2.13.0",
+		"@wordpress/wordcount": "^3.13.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
+	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
 }

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

@@ -1,27 +1,62 @@
+/**
+ * External dependencies
+ */
+import { TouchableWithoutFeedback } from 'react-native';
+
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import Warning from '../warning';
+import { store as blockEditorStore } from '../../store';
 
-export default function BlockInvalidWarning( { blockTitle, icon } ) {
+export default function BlockInvalidWarning( { blockTitle, icon, clientId } ) {
 	const accessibilityLabel = sprintf(
 		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
 		__( '%s block. This block has invalid content' ),
 		blockTitle
 	);
 
+	const selector = ( select ) => {
+		const { getBlock } = select( blockEditorStore );
+		const block = getBlock( clientId );
+		return {
+			block,
+		};
+	};
+
+	const { block } = useSelect( selector, [ clientId ] );
+
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	const recoverBlock = ( { name, attributes, innerBlocks } ) =>
+		createBlock( name, attributes, innerBlocks );
+
+	const attemptBlockRecovery = () => {
+		replaceBlock( block.clientId, recoverBlock( block ) );
+	};
+
 	return (
-		<Warning
-			title={ blockTitle }
-			message={ __( 'Problem displaying block' ) }
-			icon={ icon }
+		<TouchableWithoutFeedback
+			onPress={ attemptBlockRecovery }
 			accessible={ true }
-			accessibilityLabel={ accessibilityLabel }
-		/>
+			accessibilityRole={ 'button' }
+		>
+			<Warning
+				title={ blockTitle }
+				// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
+				message={ __(
+					'Problem displaying block. \nTap to attempt block recovery.'
+				) }
+				icon={ icon }
+				accessibilityLabel={ accessibilityLabel }
+			/>
+		</TouchableWithoutFeedback>
 	);
 }

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

@@ -56,10 +56,10 @@ function mergeWrapperProps( propsA, propsB ) {
 		...propsB,
 	};
 
-	if ( propsA && propsB && propsA.className && propsB.className ) {
+	if ( propsA?.className && propsB?.className ) {
 		newProps.className = classnames( propsA.className, propsB.className );
 	}
-	if ( propsA && propsB && propsA.style && propsB.style ) {
+	if ( propsA?.style && propsB?.style ) {
 		newProps.style = { ...propsA.style, ...propsB.style };
 	}
 

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

@@ -272,6 +272,7 @@ class BlockListBlock extends Component {
 									<BlockInvalidWarning
 										blockTitle={ title }
 										icon={ icon }
+										clientId={ clientId }
 									/>
 								)
 							}

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { identity } from 'lodash';
 import { View, Platform, TouchableWithoutFeedback } from 'react-native';
 
 /**
@@ -35,6 +34,7 @@ import { BlockDraggableWrapper } from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
 
 export const OnCaretVerticalPositionChange = createContext();
+const identity = ( x ) => x;
 
 const stylesMemo = {};
 const getStyles = (

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

@@ -7,6 +7,7 @@ import { createContext, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import { getLayoutType } from '../../layouts';
+import useSetting from '../use-setting';
 
 export const defaultLayout = { type: 'default' };
 
@@ -24,12 +25,23 @@ export function useLayout() {
 	return useContext( Layout );
 }
 
-export function LayoutStyle( { layout = {}, ...props } ) {
+export function LayoutStyle( { layout = {}, css, ...props } ) {
 	const layoutType = getLayoutType( layout.type );
+	const blockGapSupport = useSetting( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGapSupport !== null;
 
 	if ( layoutType ) {
-		return <layoutType.save layout={ layout } { ...props } />;
+		if ( css ) {
+			return <style>{ css }</style>;
+		}
+		const layoutStyle = layoutType.getLayoutStyle?.( {
+			hasBlockGapSupport,
+			layout,
+			...props,
+		} );
+		if ( layoutStyle ) {
+			return <style>{ layoutStyle }</style>;
+		}
 	}
-
 	return null;
 }

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

@@ -26,7 +26,7 @@
 	// When selecting multiple blocks, we provide an additional selection indicator.
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-hovered,
-	.block-editor-block-list__block.is-multi-selected:not([contenteditable]),
+	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected),
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
 		&::after {

package/src/components/block-list/use-block-props/use-block-class-names.js

@@ -33,6 +33,7 @@ export function useBlockClassNames( clientId ) {
 				getSettings,
 				hasSelectedInnerBlock,
 				isTyping,
+				__unstableIsFullySelected,
 			} = select( blockEditorStore );
 			const { outlineMode } = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
@@ -44,10 +45,13 @@ export function useBlockClassNames( clientId ) {
 				clientId,
 				checkDeep
 			);
+			const isMultiSelected = isBlockMultiSelected( clientId );
 			return classnames( {
 				'is-selected': isSelected,
 				'is-highlighted': isBlockHighlighted( clientId ),
-				'is-multi-selected': isBlockMultiSelected( clientId ),
+				'is-multi-selected': isMultiSelected,
+				'is-partially-selected':
+					isMultiSelected && ! __unstableIsFullySelected(),
 				'is-reusable': isReusableBlock( getBlockType( name ) ),
 				'is-dragging': isDragging,
 				'has-child-selected': isAncestorOfSelectedBlock,

package/src/components/block-lock/modal.js

@@ -10,6 +10,7 @@ import {
 	FlexItem,
 	Icon,
 	Modal,
+	ToggleControl,
 } from '@wordpress/components';
 import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
@@ -23,20 +24,41 @@ import useBlockLock from './use-block-lock';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
+function getTemplateLockValue( lock ) {
+	// Prevents all operations.
+	if ( lock.remove && lock.move ) {
+		return 'all';
+	}
+
+	// Prevents inserting or removing blocks, but allows moving existing blocks.
+	if ( lock.remove && ! lock.move ) {
+		return 'insert';
+	}
+
+	return false;
+}
+
 export default function BlockLockModal( { clientId, onClose } ) {
 	const [ lock, setLock ] = useState( { move: false, remove: false } );
 	const { canEdit, canMove, canRemove } = useBlockLock( clientId );
-	const { isReusable } = useSelect(
+	const { isReusable, templateLock, hasTemplateLock } = useSelect(
 		( select ) => {
-			const { getBlockName } = select( blockEditorStore );
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
 			const blockName = getBlockName( clientId );
+			const blockType = getBlockType( blockName );
 
 			return {
-				isReusable: isReusableBlock( getBlockType( blockName ) ),
+				isReusable: isReusableBlock( blockType ),
+				templateLock: getBlockAttributes( clientId )?.templateLock,
+				hasTemplateLock: !! blockType?.attributes?.templateLock,
 			};
 		},
 		[ clientId ]
 	);
+	const [ applyTemplateLock, setApplyTemplateLock ] = useState(
+		!! templateLock
+	);
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const instanceId = useInstanceId(
@@ -69,7 +91,12 @@ export default function BlockLockModal( { clientId, onClose } ) {
 			<form
 				onSubmit={ ( event ) => {
 					event.preventDefault();
-					updateBlockAttributes( [ clientId ], { lock } );
+					updateBlockAttributes( [ clientId ], {
+						lock,
+						templateLock: applyTemplateLock
+							? getTemplateLockValue( lock )
+							: undefined,
+					} );
 					onClose();
 				} }
 			>
@@ -171,6 +198,17 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							/>
 						</li>
 					</ul>
+					{ hasTemplateLock && (
+						<ToggleControl
+							className="block-editor-block-lock-modal__template-lock"
+							label={ __( 'Apply to all blocks inside' ) }
+							checked={ applyTemplateLock }
+							disabled={ lock.move && ! lock.remove }
+							onChange={ () =>
+								setApplyTemplateLock( ! applyTemplateLock )
+							}
+						/>
+					) }
 				</div>
 				<Flex
 					className="block-editor-block-lock-modal__actions"

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

@@ -53,6 +53,16 @@
 	}
 }
 
+.block-editor-block-lock-modal__template-lock {
+	border-top: $border-width solid $gray-300;
+	margin-top: $grid-unit-20;
+	padding: $grid-unit-15 0;
+
+	.components-base-control__field {
+		margin: 0;
+	}
+}
+
 .block-editor-block-lock-modal__actions {
 	margin-top: $grid-unit-30;
 }