@wordpress/block-editor 9.8.0 → 9.8.1-next.957ca95e4c.0

package/build-style/style-rtl.css

@@ -164,9 +164,6 @@
   margin: 0;
 }
 
-/**
- * Notices & Block Selected/Hover Styles.
- */
 /**
  * Cross-Block Selection
  */
@@ -233,6 +230,14 @@
 .block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::before {
   border-color: var(--wp-admin-theme-color);
 }
+.has-multi-selection .block-editor-block-list__layout {
+  -webkit-user-select: none;
+          user-select: none;
+}
+.block-editor-block-list__layout [class^=components-] {
+  -webkit-user-select: text;
+          user-select: text;
+}
 
 .is-block-moving-mode.block-editor-block-list__block-selection-button {
   opacity: 0;
@@ -243,6 +248,8 @@
 
 .block-editor-block-list__layout .block-editor-block-list__block {
   position: relative;
+  -webkit-user-select: text;
+          user-select: text;
   overflow-wrap: break-word;
   /**
    * Notices
@@ -254,6 +261,12 @@
   * Block styles and alignments
   */
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-partially-selected::after {
+  height: 0;
+}
+.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 {
+  height: auto;
+}
 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
   z-index: 1;
 }
@@ -299,7 +312,14 @@
   bottom: 0;
   right: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) transparent;
+  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;
@@ -1676,6 +1696,24 @@
   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 {
+  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 {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  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 .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter {
+  visibility: hidden;
+}
+
 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
   margin-bottom: 12px;
 }
@@ -3199,38 +3237,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   z-index: 100000;
 }
 
-.block-editor-text-transform-control {
-  flex: 0 0 50%;
-}
-.block-editor-text-transform-control legend {
-  margin-bottom: 8px;
-}
-.block-editor-text-transform-control .block-editor-text-transform-control__buttons {
-  display: inline-flex;
-  margin-bottom: 24px;
-}
-.block-editor-text-transform-control .block-editor-text-transform-control__buttons .components-button.has-icon {
-  min-width: 24px;
-  padding: 0;
-  margin-left: 4px;
-}
-
-.block-editor-text-decoration-control {
-  flex: 0 0 50%;
-}
-.block-editor-text-decoration-control legend {
-  margin-bottom: 8px;
-}
-.block-editor-text-decoration-control .block-editor-text-decoration-control__buttons {
-  display: inline-flex;
-  margin-bottom: 24px;
-}
-.block-editor-text-decoration-control .block-editor-text-decoration-control__buttons .components-button.has-icon {
-  min-width: 24px;
-  padding: 0;
-  margin-left: 4px;
-}
-
 .block-editor-tool-selector__help {
   margin-top: 8px;
   margin-right: -8px;
@@ -3600,11 +3606,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
-.typography-block-support-panel .components-font-size-picker__controls,
-.typography-block-support-panel .block-editor-text-decoration-control__buttons,
-.typography-block-support-panel .block-editor-text-transform-control__buttons {
-  margin-bottom: 0;
-}
 .typography-block-support-panel .single-column {
   grid-column: span 1;
 }

package/build-style/style.css

@@ -164,9 +164,6 @@
   margin: 0;
 }
 
-/**
- * Notices & Block Selected/Hover Styles.
- */
 /**
  * Cross-Block Selection
  */
@@ -233,6 +230,14 @@
 .block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::before {
   border-color: var(--wp-admin-theme-color);
 }
+.has-multi-selection .block-editor-block-list__layout {
+  -webkit-user-select: none;
+          user-select: none;
+}
+.block-editor-block-list__layout [class^=components-] {
+  -webkit-user-select: text;
+          user-select: text;
+}
 
 .is-block-moving-mode.block-editor-block-list__block-selection-button {
   opacity: 0;
@@ -243,6 +248,8 @@
 
 .block-editor-block-list__layout .block-editor-block-list__block {
   position: relative;
+  -webkit-user-select: text;
+          user-select: text;
   overflow-wrap: break-word;
   /**
    * Notices
@@ -254,6 +261,12 @@
   * Block styles and alignments
   */
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-partially-selected::after {
+  height: 0;
+}
+.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 {
+  height: auto;
+}
 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
   z-index: 1;
 }
@@ -299,7 +312,14 @@
   bottom: 0;
   left: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) transparent;
+  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;
@@ -1676,6 +1696,24 @@
   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 {
+  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 {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 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 .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter {
+  visibility: hidden;
+}
+
 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
   margin-bottom: 12px;
 }
@@ -3199,38 +3237,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   z-index: 100000;
 }
 
-.block-editor-text-transform-control {
-  flex: 0 0 50%;
-}
-.block-editor-text-transform-control legend {
-  margin-bottom: 8px;
-}
-.block-editor-text-transform-control .block-editor-text-transform-control__buttons {
-  display: inline-flex;
-  margin-bottom: 24px;
-}
-.block-editor-text-transform-control .block-editor-text-transform-control__buttons .components-button.has-icon {
-  min-width: 24px;
-  padding: 0;
-  margin-right: 4px;
-}
-
-.block-editor-text-decoration-control {
-  flex: 0 0 50%;
-}
-.block-editor-text-decoration-control legend {
-  margin-bottom: 8px;
-}
-.block-editor-text-decoration-control .block-editor-text-decoration-control__buttons {
-  display: inline-flex;
-  margin-bottom: 24px;
-}
-.block-editor-text-decoration-control .block-editor-text-decoration-control__buttons .components-button.has-icon {
-  min-width: 24px;
-  padding: 0;
-  margin-right: 4px;
-}
-
 .block-editor-tool-selector__help {
   margin-top: 8px;
   margin-left: -8px;
@@ -3600,11 +3606,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
-.typography-block-support-panel .components-font-size-picker__controls,
-.typography-block-support-panel .block-editor-text-decoration-control__buttons,
-.typography-block-support-panel .block-editor-text-transform-control__buttons {
-  margin-bottom: 0;
-}
 .typography-block-support-panel .single-column {
   grid-column: span 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.8.0",
+	"version": "9.8.1-next.957ca95e4c.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.16.0",
-		"@wordpress/api-fetch": "^6.13.0",
-		"@wordpress/blob": "^3.16.0",
-		"@wordpress/blocks": "^11.15.0",
-		"@wordpress/components": "^20.0.0",
-		"@wordpress/compose": "^5.14.0",
-		"@wordpress/data": "^7.0.0",
-		"@wordpress/date": "^4.16.0",
-		"@wordpress/deprecated": "^3.16.0",
-		"@wordpress/dom": "^3.16.0",
-		"@wordpress/element": "^4.14.0",
-		"@wordpress/hooks": "^3.16.0",
-		"@wordpress/html-entities": "^3.16.0",
-		"@wordpress/i18n": "^4.16.0",
-		"@wordpress/icons": "^9.7.0",
-		"@wordpress/is-shallow-equal": "^4.16.0",
-		"@wordpress/keyboard-shortcuts": "^3.14.0",
-		"@wordpress/keycodes": "^3.16.0",
-		"@wordpress/notices": "^3.16.0",
-		"@wordpress/rich-text": "^5.14.0",
-		"@wordpress/shortcode": "^3.16.0",
-		"@wordpress/style-engine": "^0.15.0",
-		"@wordpress/token-list": "^2.16.0",
-		"@wordpress/url": "^3.17.0",
-		"@wordpress/warning": "^2.16.0",
-		"@wordpress/wordcount": "^3.16.0",
+		"@wordpress/a11y": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/api-fetch": "^6.13.1-next.957ca95e4c.0",
+		"@wordpress/blob": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/blocks": "^11.15.1-next.957ca95e4c.0",
+		"@wordpress/components": "^20.0.2-next.957ca95e4c.0",
+		"@wordpress/compose": "^5.14.1-next.957ca95e4c.0",
+		"@wordpress/data": "^7.0.1-next.957ca95e4c.0",
+		"@wordpress/date": "^4.16.1-next.957ca95e4c.0",
+		"@wordpress/deprecated": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/dom": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/element": "^4.14.1-next.957ca95e4c.0",
+		"@wordpress/hooks": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/html-entities": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/i18n": "^4.16.1-next.957ca95e4c.0",
+		"@wordpress/icons": "^9.7.1-next.957ca95e4c.0",
+		"@wordpress/is-shallow-equal": "^4.16.1-next.957ca95e4c.0",
+		"@wordpress/keyboard-shortcuts": "^3.14.1-next.957ca95e4c.0",
+		"@wordpress/keycodes": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/notices": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/rich-text": "^5.14.1-next.957ca95e4c.0",
+		"@wordpress/shortcode": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/style-engine": "^0.15.1-next.957ca95e4c.0",
+		"@wordpress/token-list": "^2.16.1-next.957ca95e4c.0",
+		"@wordpress/url": "^3.17.1-next.957ca95e4c.0",
+		"@wordpress/warning": "^2.16.1-next.957ca95e4c.0",
+		"@wordpress/wordcount": "^3.16.1-next.957ca95e4c.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -79,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "171b87c7465b93e685e081c5f57f153507363c95"
+	"gitHead": "272a74bbbaab10ee24424eafe9578e705fbfbbb4"
 }

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

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import BlockListBlock from './block';
+
+/**
+ * NOTE: This is a component currently used by the List block (V2)
+ * It only passes the needed props for this block, if other blocks will use it
+ * make sure you pass other props that might be required coming from:
+ * components/inner-blocks/index.native.js
+ */
+
+function BlockListCompact( props ) {
+	const {
+		marginHorizontal = styles.defaultBlock.marginLeft,
+		marginVertical = styles.defaultBlock.marginTop,
+		rootClientId,
+	} = props;
+	const { blockClientIds } = useSelect(
+		( select ) => {
+			const { getBlockOrder } = select( blockEditorStore );
+			const blockOrder = getBlockOrder( rootClientId );
+
+			return {
+				blockClientIds: blockOrder,
+			};
+		},
+		[ rootClientId ]
+	);
+
+	const containerStyle = {
+		marginVertical: -marginVertical,
+		marginHorizontal: -marginHorizontal,
+	};
+
+	return (
+		<View style={ containerStyle }>
+			{ blockClientIds.map( ( currentClientId ) => (
+				<BlockListBlock
+					clientId={ currentClientId }
+					key={ currentClientId }
+					marginHorizontal={ marginHorizontal }
+					marginVertical={ marginVertical }
+				/>
+			) ) }
+		</View>
+	);
+}
+
+export default BlockListCompact;

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

@@ -4,10 +4,6 @@
 	margin: 0;
 }
 
-/**
- * Notices & Block Selected/Hover Styles.
- */
-
 /**
  * Cross-Block Selection
  */
@@ -104,8 +100,20 @@
 			border-color: var(--wp-admin-theme-color);
 		}
 	}
-}
 
+	// Ensure an accurate partial text selection.
+	// To do this, we disable text selection on the main container, then re-enable it only on the
+	// elements that actually get selected.
+	// To keep in mind: user-select is currently inherited to all nodes inside.
+	.has-multi-selection & {
+		user-select: none;
+	}
+
+	// Re-enable it on components inside.
+	[class^="components-"] {
+		user-select: text;
+	}
+}
 
 .is-block-moving-mode.block-editor-block-list__block-selection-button {
 	// Should be invisible but not unfocusable.
@@ -118,6 +126,19 @@
 .block-editor-block-list__layout .block-editor-block-list__block {
 	position: relative;
 
+	// Re-enable text-selection on editable blocks.
+	user-select: text;
+
+	// Hide the select style pseudo element as it interferes with the style.
+	&.is-partially-selected::after {
+		height: 0;
+	}
+
+	&.is-highlighted::after,
+	&.is-highlighted ~ .is-multi-selected::after {
+		height: auto;
+	}
+
 	// Break long strings of text without spaces so they don't overflow the block.
 	overflow-wrap: break-word;
 
@@ -192,7 +213,9 @@
 		bottom: 0;
 		left: 0;
 		border-radius: $radius-block-ui;
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) transparent;
+		box-shadow: 0 0 0 0 transparent;
+		transition: box-shadow 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
 	// Warnings

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -85,7 +85,7 @@ export function useFocusFirstElement( clientId ) {
 		const { ownerDocument } = ref.current;
 
 		// Do not focus the block if it already contains the active element.
-		if ( ref.current.contains( ownerDocument.activeElement ) ) {
+		if ( isInsideRootBlock( ref.current, ownerDocument.activeElement ) ) {
 			return;
 		}
 

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

@@ -66,8 +66,6 @@ function BlockPopover(
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
-			// Observe movement for block animations (especially horizontal).
-			__unstableObserveElement={ selectedElement }
 			__unstableForcePosition
 			__unstableShift
 			{ ...props }

package/src/components/block-switcher/test/index.js

@@ -8,7 +8,6 @@ import { shallow, mount } from 'enzyme';
  */
 import { useSelect } from '@wordpress/data';
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-import { DOWN } from '@wordpress/keycodes';
 import { Button } from '@wordpress/components';
 import { copy } from '@wordpress/icons';
 
@@ -180,7 +179,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 			const onToggleStub = jest.fn();
 			const mockKeyDown = {
 				preventDefault: () => {},
-				keyCode: DOWN,
+				code: 'ArrowDown',
 			};
 
 			afterEach( () => {

package/src/components/button-block-appender/style.scss

@@ -31,3 +31,26 @@
 		color: $black;
 	}
 }
+
+// When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
+.block-list-appender:only-child {
+	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
+	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > & {
+		pointer-events: none;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			pointer-events: none;
+			@include placeholder-style();
+		}
+
+		.block-editor-inserter {
+			visibility: hidden;
+		}
+	}
+}

package/src/components/colors-gradients/control.js

@@ -92,6 +92,7 @@ function ColorGradientControlInner( {
 		),
 		[ TAB_GRADIENT.value ]: (
 			<GradientPicker
+				__nextHasNoMargin
 				value={ gradientValue }
 				onChange={
 					canChooseAColor

package/src/components/inner-blocks/index.native.js

@@ -21,6 +21,7 @@ import getBlockContext from './get-block-context';
  * Internal dependencies
  */
 import BlockList from '../block-list';
+import BlockListCompact from '../block-list/block-list-compact';
 import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { BlockContextProvider } from '../block-context';
@@ -96,6 +97,7 @@ function UncontrolledInnerBlocks( props ) {
 		blockWidth,
 		__experimentalLayout: layout = defaultLayout,
 		gridProperties,
+		useCompactList,
 	} = props;
 
 	const block = useSelect(
@@ -112,8 +114,10 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
+	const BlockListComponent = useCompactList ? BlockListCompact : BlockList;
+
 	let blockList = (
-		<BlockList
+		<BlockListComponent
 			marginVertical={ marginVertical }
 			marginHorizontal={ marginHorizontal }
 			rootClientId={ clientId }

package/src/components/rich-text/index.js

@@ -115,6 +115,15 @@ function RichTextWrapper(
 	},
 	forwardedRef
 ) {
+	if ( multiline ) {
+		deprecated( 'wp.blockEditor.RichText multiline prop', {
+			since: '6.1',
+			version: '6.3',
+			alternative: 'nested blocks (InnerBlocks)',
+			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/',
+		} );
+	}
+
 	const instanceId = useInstanceId( RichTextWrapper );
 
 	identifier = identifier || instanceId;

package/src/components/spacing-sizes-control/spacing-input-control.js

@@ -30,6 +30,7 @@ import {
 	LABELS,
 	getSliderValueFromPreset,
 	getCustomValueFromPreset,
+	getPresetValueFromCustomValue,
 	isValueSpacingPreset,
 } from './utils';
 
@@ -42,6 +43,9 @@ export default function SpacingInputControl( {
 	type,
 	minimumCustomValue,
 } ) {
+	// Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
+	value = getPresetValueFromCustomValue( value, spacingSizes );
+
 	let selectListSizes = spacingSizes;
 	const showRangeControl = spacingSizes.length <= 8;
 
@@ -216,6 +220,7 @@ export default function SpacingInputControl( {
 						label={ ariaLabel }
 						hideLabelFromVision={ true }
 						className="components-spacing-sizes-control__custom-value-input"
+						style={ { gridColumn: '1' } }
 					/>
 
 					<RangeControl

package/src/components/spacing-sizes-control/test/utils.js

@@ -4,6 +4,7 @@
 import {
 	isValueSpacingPreset,
 	getCustomValueFromPreset,
+	getPresetValueFromCustomValue,
 	getSpacingPresetCssVar,
 	getSpacingPresetSlug,
 	getSliderValueFromPreset,
@@ -40,6 +41,28 @@ describe( 'getCustomValueFromPreset', () => {
 	} );
 } );
 
+describe( 'getPresetValueFromCustomValue', () => {
+	const spacingSizes = [ { name: 'Small', slug: 20, size: '8px' } ];
+	it( 'should return original value if a string in spacing presets var format', () => {
+		expect(
+			getPresetValueFromCustomValue(
+				'var:preset|spacing|80',
+				spacingSizes
+			)
+		).toBe( 'var:preset|spacing|80' );
+	} );
+	it( 'should return value constructed from matching spacingSizes array entry if value matches sizes', () => {
+		expect( getPresetValueFromCustomValue( '8px', spacingSizes ) ).toBe(
+			'var:preset|spacing|20'
+		);
+	} );
+	it( 'should return values as-is if no matching preset in spacingSizes array', () => {
+		expect(
+			getPresetValueFromCustomValue( '1.125rem', spacingSizes )
+		).toBe( '1.125rem' );
+	} );
+} );
+
 describe( 'getSpacingPresetCssVar', () => {
 	it( 'should return original value if not a string in spacing presets var format', () => {
 		expect( getSpacingPresetCssVar( '20px' ) ).toBe( '20px' );
@@ -144,6 +167,9 @@ describe( 'isValuesDefined', () => {
 	it( 'should return false if values are not defined', () => {
 		expect( isValuesDefined( undefinedValues ) ).toBe( false );
 	} );
+	it( 'should return false if values is passed in as null', () => {
+		expect( isValuesDefined( null ) ).toBe( false );
+	} );
 	const definedValues = {
 		top: 'var:preset|spacing|30',
 		bottom: 'var:preset|spacing|20',