@wordpress/block-library 8.20.1 → 8.21.1-next.f8d8eceb.0

package/build-style/navigation/style.css

@@ -296,6 +296,7 @@ button.wp-block-navigation-item__content {
 }
 
 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
+  padding-left: 0;
   padding-right: 0.85em;
 }
 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
@@ -303,6 +304,10 @@ button.wp-block-navigation-item__content {
   pointer-events: none;
 }
 
+.wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
+  padding: 0;
+}
+
 /**
  * Margins
  */

package/build-style/query/style-rtl.css

@@ -127,14 +127,4 @@
   100% {
     opacity: 0;
   }
-}
-.wp-block-query__enhanced-pagination-navigation-announce {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  border: 0;
 }

package/build-style/query/style.css

@@ -127,14 +127,4 @@
   100% {
     opacity: 0;
   }
-}
-.wp-block-query__enhanced-pagination-navigation-announce {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  border: 0;
 }

package/build-style/style-rtl.css

@@ -1137,11 +1137,6 @@ section.wp-block-cover-image > h2,
   margin-bottom: 1em;
 }
 
-@media (max-width: 768px) {
-  .wp-block-file__embed {
-    display: none;
-  }
-}
 :where(.wp-block-file__button) {
   border-radius: 2em;
   padding: 0.5em 1em;
@@ -1154,6 +1149,54 @@ section.wp-block-cover-image > h2,
   text-decoration: none;
 }
 
+.wp-block-form-input__label {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  margin-bottom: 0.5em;
+  /*
+  Small tweak to left-align the checkbox.
+  Even though `:has` is not currently supported in Firefox, this is a small tweak
+  and does not affect the functionality of the block or the user's experience.
+  There will be a minor inconsistency between browsers. However, it's more important to provide
+  a better experience for 80+% of users, until Firefox catches up and supports `:has`.
+  */
+}
+.wp-block-form-input__label.is-label-inline {
+  flex-direction: row;
+  gap: 0.5em;
+  align-items: center;
+}
+.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content {
+  margin-bottom: 0.5em;
+}
+.wp-block-form-input__label:has(input[type=checkbox]) {
+  width: -moz-fit-content;
+  width: fit-content;
+  flex-direction: row-reverse;
+}
+
+.wp-block-form-input__label-content {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.wp-block-form-input__input {
+  padding: 0 0.5em;
+  font-size: 1em;
+  margin-bottom: 0.5em;
+}
+.wp-block-form-input__input[type=text], .wp-block-form-input__input[type=password], .wp-block-form-input__input[type=date], .wp-block-form-input__input[type=datetime], .wp-block-form-input__input[type=datetime-local], .wp-block-form-input__input[type=email], .wp-block-form-input__input[type=month], .wp-block-form-input__input[type=number], .wp-block-form-input__input[type=search], .wp-block-form-input__input[type=tel], .wp-block-form-input__input[type=time], .wp-block-form-input__input[type=url], .wp-block-form-input__input[type=week] {
+  min-height: 2em;
+  line-height: 2;
+  border: 1px solid;
+}
+
+textarea.wp-block-form-input__input {
+  min-height: 10em;
+}
+
 .wp-block-gallery:not(.has-nested-images),
 .blocks-gallery-grid:not(.has-nested-images) {
   display: flex;
@@ -1617,21 +1660,46 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 
 .wp-lightbox-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.wp-lightbox-container img {
+  cursor: zoom-in;
+}
+.wp-lightbox-container img:hover + button {
+  opacity: 1;
 }
 .wp-lightbox-container button {
+  opacity: 0;
   border: none;
-  background: none;
+  background: #000;
   cursor: zoom-in;
-  width: 100%;
-  height: 100%;
+  width: 24px;
+  height: 24px;
   position: absolute;
   z-index: 100;
+  top: 10px;
+  left: 10px;
+  text-align: center;
+  padding: 0;
+  border-radius: 10%;
 }
 .wp-lightbox-container button:focus-visible {
   outline: 5px auto #212121;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: 5px;
 }
+.wp-lightbox-container button:hover {
+  cursor: pointer;
+  opacity: 1;
+}
+.wp-lightbox-container button:focus {
+  opacity: 1;
+}
+.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
+  background: #000;
+  border: none;
+}
 
 .wp-lightbox-overlay {
   position: fixed;
@@ -1647,11 +1715,20 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 .wp-lightbox-overlay .close-button {
   position: absolute;
-  top: calc(env(safe-area-inset-top) + 20px);
-  left: calc(env(safe-area-inset-left) + 20px);
+  top: calc(env(safe-area-inset-top) + 16px);
+  left: calc(env(safe-area-inset-left) + 16px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wp-lightbox-overlay .close-button:hover, .wp-lightbox-overlay .close-button:focus, .wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
 }
 .wp-lightbox-overlay .lightbox-image-container {
   position: absolute;
@@ -2253,6 +2330,7 @@ button.wp-block-navigation-item__content {
 }
 
 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
+  padding-right: 0;
   padding-left: 0.85em;
 }
 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
@@ -2260,6 +2338,10 @@ button.wp-block-navigation-item__content {
   pointer-events: none;
 }
 
+.wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
+  padding: 0;
+}
+
 /**
  * Margins
  */

package/build-style/style.css

@@ -1145,11 +1145,6 @@ section.wp-block-cover-image > h2,
   margin-bottom: 1em;
 }
 
-@media (max-width: 768px) {
-  .wp-block-file__embed {
-    display: none;
-  }
-}
 :where(.wp-block-file__button) {
   border-radius: 2em;
   padding: 0.5em 1em;
@@ -1162,6 +1157,54 @@ section.wp-block-cover-image > h2,
   text-decoration: none;
 }
 
+.wp-block-form-input__label {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  margin-bottom: 0.5em;
+  /*
+  Small tweak to left-align the checkbox.
+  Even though `:has` is not currently supported in Firefox, this is a small tweak
+  and does not affect the functionality of the block or the user's experience.
+  There will be a minor inconsistency between browsers. However, it's more important to provide
+  a better experience for 80+% of users, until Firefox catches up and supports `:has`.
+  */
+}
+.wp-block-form-input__label.is-label-inline {
+  flex-direction: row;
+  gap: 0.5em;
+  align-items: center;
+}
+.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content {
+  margin-bottom: 0.5em;
+}
+.wp-block-form-input__label:has(input[type=checkbox]) {
+  width: -moz-fit-content;
+  width: fit-content;
+  flex-direction: row-reverse;
+}
+
+.wp-block-form-input__label-content {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.wp-block-form-input__input {
+  padding: 0 0.5em;
+  font-size: 1em;
+  margin-bottom: 0.5em;
+}
+.wp-block-form-input__input[type=text], .wp-block-form-input__input[type=password], .wp-block-form-input__input[type=date], .wp-block-form-input__input[type=datetime], .wp-block-form-input__input[type=datetime-local], .wp-block-form-input__input[type=email], .wp-block-form-input__input[type=month], .wp-block-form-input__input[type=number], .wp-block-form-input__input[type=search], .wp-block-form-input__input[type=tel], .wp-block-form-input__input[type=time], .wp-block-form-input__input[type=url], .wp-block-form-input__input[type=week] {
+  min-height: 2em;
+  line-height: 2;
+  border: 1px solid;
+}
+
+textarea.wp-block-form-input__input {
+  min-height: 10em;
+}
+
 .wp-block-gallery:not(.has-nested-images),
 .blocks-gallery-grid:not(.has-nested-images) {
   display: flex;
@@ -1631,21 +1674,46 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 
 .wp-lightbox-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.wp-lightbox-container img {
+  cursor: zoom-in;
+}
+.wp-lightbox-container img:hover + button {
+  opacity: 1;
 }
 .wp-lightbox-container button {
+  opacity: 0;
   border: none;
-  background: none;
+  background: #000;
   cursor: zoom-in;
-  width: 100%;
-  height: 100%;
+  width: 24px;
+  height: 24px;
   position: absolute;
   z-index: 100;
+  top: 10px;
+  right: 10px;
+  text-align: center;
+  padding: 0;
+  border-radius: 10%;
 }
 .wp-lightbox-container button:focus-visible {
   outline: 5px auto #212121;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: 5px;
 }
+.wp-lightbox-container button:hover {
+  cursor: pointer;
+  opacity: 1;
+}
+.wp-lightbox-container button:focus {
+  opacity: 1;
+}
+.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
+  background: #000;
+  border: none;
+}
 
 .wp-lightbox-overlay {
   position: fixed;
@@ -1661,11 +1729,20 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 .wp-lightbox-overlay .close-button {
   position: absolute;
-  top: calc(env(safe-area-inset-top) + 20px);
-  right: calc(env(safe-area-inset-right) + 20px);
+  top: calc(env(safe-area-inset-top) + 16px);
+  right: calc(env(safe-area-inset-right) + 16px);
   padding: 0;
   cursor: pointer;
   z-index: 5000000;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wp-lightbox-overlay .close-button:hover, .wp-lightbox-overlay .close-button:focus, .wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background) {
+  background: none;
+  border: none;
 }
 .wp-lightbox-overlay .lightbox-image-container {
   position: absolute;
@@ -2283,6 +2360,7 @@ button.wp-block-navigation-item__content {
 }
 
 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
+  padding-left: 0;
   padding-right: 0.85em;
 }
 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
@@ -2290,6 +2368,10 @@ button.wp-block-navigation-item__content {
   pointer-events: none;
 }
 
+.wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
+  padding: 0;
+}
+
 /**
  * Margins
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.20.1",
+	"version": "8.21.1-next.f8d8eceb.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.43.0",
-		"@wordpress/api-fetch": "^6.40.0",
-		"@wordpress/autop": "^3.43.0",
-		"@wordpress/blob": "^3.43.0",
-		"@wordpress/block-editor": "^12.11.1",
-		"@wordpress/blocks": "^12.20.1",
-		"@wordpress/components": "^25.9.1",
-		"@wordpress/compose": "^6.20.0",
-		"@wordpress/core-data": "^6.20.1",
-		"@wordpress/data": "^9.13.1",
-		"@wordpress/date": "^4.43.0",
-		"@wordpress/deprecated": "^3.43.0",
-		"@wordpress/dom": "^3.43.0",
-		"@wordpress/element": "^5.20.0",
-		"@wordpress/escape-html": "^2.43.0",
-		"@wordpress/hooks": "^3.43.0",
-		"@wordpress/html-entities": "^3.43.0",
-		"@wordpress/i18n": "^4.43.0",
-		"@wordpress/icons": "^9.34.0",
-		"@wordpress/interactivity": "^2.4.0",
-		"@wordpress/keycodes": "^3.43.0",
-		"@wordpress/notices": "^4.11.1",
-		"@wordpress/primitives": "^3.41.0",
-		"@wordpress/private-apis": "^0.25.0",
-		"@wordpress/reusable-blocks": "^4.20.1",
-		"@wordpress/rich-text": "^6.20.1",
-		"@wordpress/server-side-render": "^4.20.1",
-		"@wordpress/url": "^3.44.0",
-		"@wordpress/viewport": "^5.20.1",
-		"@wordpress/wordcount": "^3.43.0",
+		"@wordpress/a11y": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/api-fetch": "^6.41.1-next.f8d8eceb.0",
+		"@wordpress/autop": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/blob": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/block-editor": "^12.12.2-next.f8d8eceb.0",
+		"@wordpress/blocks": "^12.21.1-next.f8d8eceb.0",
+		"@wordpress/components": "^25.11.1-next.f8d8eceb.0",
+		"@wordpress/compose": "^6.21.1-next.f8d8eceb.0",
+		"@wordpress/core-data": "^6.21.1-next.f8d8eceb.0",
+		"@wordpress/data": "^9.14.1-next.f8d8eceb.0",
+		"@wordpress/date": "^4.44.1-next.f8d8eceb.0",
+		"@wordpress/deprecated": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/dom": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/element": "^5.21.1-next.f8d8eceb.0",
+		"@wordpress/escape-html": "^2.44.1-next.f8d8eceb.0",
+		"@wordpress/hooks": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/html-entities": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/i18n": "^4.44.1-next.f8d8eceb.0",
+		"@wordpress/icons": "^9.35.1-next.f8d8eceb.0",
+		"@wordpress/interactivity": "^2.5.2-next.f8d8eceb.0",
+		"@wordpress/keycodes": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/notices": "^4.12.1-next.f8d8eceb.0",
+		"@wordpress/primitives": "^3.42.1-next.f8d8eceb.0",
+		"@wordpress/private-apis": "^0.26.1-next.f8d8eceb.0",
+		"@wordpress/reusable-blocks": "^4.21.1-next.f8d8eceb.0",
+		"@wordpress/rich-text": "^6.21.1-next.f8d8eceb.0",
+		"@wordpress/server-side-render": "^4.21.1-next.f8d8eceb.0",
+		"@wordpress/url": "^3.45.1-next.f8d8eceb.0",
+		"@wordpress/viewport": "^5.21.1-next.f8d8eceb.0",
+		"@wordpress/wordcount": "^3.44.1-next.f8d8eceb.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e17f760ed0dc11cce78157d7c2f2086b1b3c09d8"
+	"gitHead": "8d8fd197e202b8104ffb1cb83048efd0a6c3faf4"
 }

package/src/avatar/block.json

@@ -30,7 +30,11 @@
 		"alignWide": false,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"__experimentalBorder": {
 			"__experimentalSkipSerialization": true,

package/src/block/block.json

@@ -15,6 +15,7 @@
 	"supports": {
 		"customClassName": false,
 		"html": false,
-		"inserter": false
+		"inserter": false,
+		"renaming": false
 	}
 }

package/src/block/edit-title.native.js

@@ -6,7 +6,7 @@ import { Text, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon, useGlobalStyles } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { help, lock } from '@wordpress/icons';
@@ -17,18 +17,21 @@ import { help, lock } from '@wordpress/icons';
 import styles from './editor.scss';
 
 function EditTitle( { getStylesFromColorScheme, title } ) {
-	const lockIconStyle = getStylesFromColorScheme(
-		styles.lockIcon,
-		styles.lockIconDark
-	);
-	const titleStyle = getStylesFromColorScheme(
-		styles.title,
-		styles.titleDark
-	);
-	const infoIconStyle = getStylesFromColorScheme(
-		styles.infoIcon,
-		styles.infoIconDark
-	);
+	const globalStyles = useGlobalStyles();
+	const baseColors = globalStyles?.baseColors?.color;
+
+	const lockIconStyle = [
+		getStylesFromColorScheme( styles.lockIcon, styles.lockIconDark ),
+		baseColors && { color: baseColors.text },
+	];
+	const titleStyle = [
+		getStylesFromColorScheme( styles.title, styles.titleDark ),
+		baseColors && { color: baseColors.text },
+	];
+	const infoIconStyle = [
+		getStylesFromColorScheme( styles.infoIcon, styles.infoIconDark ),
+		baseColors && { color: baseColors.text },
+	];
 	const separatorStyle = getStylesFromColorScheme(
 		styles.separator,
 		styles.separatorDark

package/src/calendar/index.php

@@ -33,10 +33,8 @@ function render_block_core_calendar( $attributes ) {
 			str_contains( $permalink_structure, '%monthnum%' ) &&
 			str_contains( $permalink_structure, '%year%' )
 		) {
-			// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
 			$monthnum = $attributes['month'];
-			// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
-			$year = $attributes['year'];
+			$year     = $attributes['year'];
 		}
 	}
 
@@ -70,10 +68,8 @@ function render_block_core_calendar( $attributes ) {
 		$calendar
 	);
 
-	// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
 	$monthnum = $previous_monthnum;
-	// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
-	$year = $previous_year;
+	$year     = $previous_year;
 
 	return $output;
 }

package/src/code/edit.native.js

@@ -9,6 +9,7 @@ import { View } from 'react-native';
 import { PlainText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -22,7 +23,15 @@ import styles from './theme.scss';
 // Note: styling is applied directly to the (nested) PlainText component. Web-side components
 // apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
 export function CodeEdit( props ) {
-	const { attributes, setAttributes, onFocus, onBlur, style } = props;
+	const {
+		attributes,
+		setAttributes,
+		onFocus,
+		onBlur,
+		style,
+		insertBlocksAfter,
+		mergeBlocks,
+	} = props;
 	const codeStyle = {
 		...usePreferredColorSchemeStyle(
 			styles.blockCode,
@@ -40,16 +49,21 @@ export function CodeEdit( props ) {
 		<View>
 			<PlainText
 				value={ attributes.content }
+				identifier="content"
 				style={ codeStyle }
 				multiline={ true }
 				underlineColorAndroid="transparent"
 				onChange={ ( content ) => setAttributes( { content } ) }
+				onMerge={ mergeBlocks }
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
 				isSelected={ props.isSelected }
 				onFocus={ onFocus }
 				onBlur={ onBlur }
 				placeholderTextColor={ placeholderStyle.color }
+				__unstableOnSplitAtDoubleLineEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
 			/>
 		</View>
 	);

package/src/column/edit.js

@@ -12,7 +12,7 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InspectorControls,
 	useBlockProps,
-	useSetting,
+	useSettings,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -33,14 +33,9 @@ function ColumnEdit( {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 	} );
 
 	const { columnsIds, hasChildBlocks, rootClientId } = useSelect(

package/src/column/edit.native.js

@@ -15,7 +15,7 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InspectorControls,
 	store as blockEditorStore,
-	useSetting,
+	useSettings,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -60,14 +60,9 @@ function ColumnEdit( {
 
 	const [ widthUnit, setWidthUnit ] = useState( valueUnit || '%' );
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 	} );
 
 	const updateAlignment = ( alignment ) => {

package/src/columns/edit.native.js

@@ -23,7 +23,7 @@ import {
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
 	BlockVariationPicker,
-	useSetting,
+	useSettings,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { withDispatch, useSelect } from '@wordpress/data';
@@ -106,14 +106,9 @@ function ColumnsEditContainer( {
 	const { verticalAlignment, align } = attributes;
 	const { width } = sizes || {};
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 	} );
 
 	useEffect( () => {

package/src/comment-author-avatar/index.php

@@ -23,7 +23,7 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block
 		return '';
 	}
 
-	// This is the only way to retreive style and classes on different instances.
+	// This is the only way to retrieve style and classes on different instances.
 	$wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports();
 
 	/**