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

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;
@@ -2365,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 {
@@ -2372,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.21.0",
+	"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.44.0",
-		"@wordpress/api-fetch": "^6.41.0",
-		"@wordpress/autop": "^3.44.0",
-		"@wordpress/blob": "^3.44.0",
-		"@wordpress/block-editor": "^12.12.0",
-		"@wordpress/blocks": "^12.21.0",
-		"@wordpress/components": "^25.10.0",
-		"@wordpress/compose": "^6.21.0",
-		"@wordpress/core-data": "^6.21.0",
-		"@wordpress/data": "^9.14.0",
-		"@wordpress/date": "^4.44.0",
-		"@wordpress/deprecated": "^3.44.0",
-		"@wordpress/dom": "^3.44.0",
-		"@wordpress/element": "^5.21.0",
-		"@wordpress/escape-html": "^2.44.0",
-		"@wordpress/hooks": "^3.44.0",
-		"@wordpress/html-entities": "^3.44.0",
-		"@wordpress/i18n": "^4.44.0",
-		"@wordpress/icons": "^9.35.0",
-		"@wordpress/interactivity": "^2.5.0",
-		"@wordpress/keycodes": "^3.44.0",
-		"@wordpress/notices": "^4.12.0",
-		"@wordpress/primitives": "^3.42.0",
-		"@wordpress/private-apis": "^0.26.0",
-		"@wordpress/reusable-blocks": "^4.21.0",
-		"@wordpress/rich-text": "^6.21.0",
-		"@wordpress/server-side-render": "^4.21.0",
-		"@wordpress/url": "^3.45.0",
-		"@wordpress/viewport": "^5.21.0",
-		"@wordpress/wordcount": "^3.44.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": "f83bb1a71e8fa416131b81a9f282a72a1dc6c694"
+	"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/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/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();
 
 	/**

package/src/cover/controls.native.js

@@ -22,7 +22,7 @@ import {
 import { plus } from '@wordpress/icons';
 import { useState, useCallback, useRef } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useSetting, MediaUpload } from '@wordpress/block-editor';
+import { useSettings, MediaUpload } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -68,14 +68,9 @@ function Controls( {
 		[ minHeight ]
 	);
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
 		defaultValues: { px: 430, em: 20, rem: 20, vw: 20, vh: 50 },
 	} );
 

package/src/cover/edit/index.js

@@ -14,7 +14,7 @@ import {
 	withColors,
 	ColorPalette,
 	useBlockProps,
-	useSetting,
+	useSettings,
 	useInnerBlocksProps,
 	__experimentalUseGradient,
 	store as blockEditorStore,
@@ -318,7 +318,8 @@ function CoverEdit( {
 	const blockProps = useBlockProps( { ref } );
 
 	// Check for fontSize support before we pass a fontSize attribute to the innerBlocks.
-	const hasFontSizes = !! useSetting( 'typography.fontSizes' )?.length;
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
+	const hasFontSizes = fontSizes?.length > 0;
 	const innerBlocksTemplate = getInnerBlocksTemplate( {
 		fontSize: hasFontSizes ? 'large' : undefined,
 	} );

package/src/cover/edit/inspector-controls.js

@@ -20,7 +20,7 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import {
 	InspectorControls,
-	useSetting,
+	useSettings,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
@@ -42,14 +42,9 @@ function CoverHeightInput( {
 	const inputId = `block-cover-height-input-${ instanceId }`;
 	const isPx = unit === 'px';
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
 		defaultValues: { px: 430, '%': 20, em: 20, rem: 20, vw: 20, vh: 50 },
 	} );
 

package/src/file/index.php

@@ -59,7 +59,8 @@ function render_block_core_file( $attributes, $content, $block ) {
 		$processor->next_tag();
 		$processor->set_attribute( 'data-wp-interactive', '' );
 		$processor->next_tag( 'object' );
-		$processor->set_attribute( 'data-wp-style--display', 'selectors.core.file.hasPdfPreview' );
+		$processor->set_attribute( 'data-wp-bind--hidden', '!selectors.core.file.hasPdfPreview' );
+		$processor->set_attribute( 'hidden', true );
 		return $processor->get_updated_html();
 	}
 

package/src/file/style.scss

@@ -29,12 +29,6 @@
 	margin-bottom: 1em;
 }
 
-@media (max-width: 768px) {
-	.wp-block-file__embed {
-		display: none;
-	}
-}
-
 //This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
 :where(.wp-block-file__button) {
 	border-radius: 2em;

package/src/file/view.js

@@ -5,13 +5,13 @@ import { store } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { browserSupportsPdfs } from './utils';
+import { browserSupportsPdfs as hasPdfPreview } from './utils';
 
 store( {
 	selectors: {
 		core: {
 			file: {
-				hasPdfPreview: browserSupportsPdfs() ? 'inherit' : 'none',
+				hasPdfPreview,
 			},
 		},
 	},

package/src/form/edit.js

@@ -107,7 +107,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						help={
 							submissionMethod === 'custom'
 								? __(
-										'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Andvanced" section.'
+										'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Advanced" section.'
 								  )
 								: __(
 										'Select the method to use for form submissions.'

package/src/form/variations.js

@@ -63,7 +63,7 @@ const variations = [
 		name: 'wp-privacy-form',
 		title: __( 'Experimental privacy request form' ),
 		keywords: [ 'GDPR' ],
-		description: __( 'A form torequest data exports and/or deletion.' ),
+		description: __( 'A form to request data exports and/or deletion.' ),
 		attributes: {
 			submissionMethod: 'custom',
 			action: '',

package/src/form-input/block.json

@@ -3,7 +3,7 @@
 	"apiVersion": 3,
 	"__experimental": true,
 	"name": "core/form-input",
-	"title": "Input field",
+	"title": "Input Field",
 	"category": "common",
 	"parent": [ "core/form" ],
 	"description": "The basic building block for forms.",

package/src/form-input/variations.js

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 const variations = [
 	{
 		name: 'text',
-		title: __( 'Text input' ),
+		title: __( 'Text Input' ),
 		icon: 'edit-page',
 		description: __( 'A generic text input.' ),
 		attributes: { type: 'text' },
@@ -17,7 +17,7 @@ const variations = [
 	},
 	{
 		name: 'textarea',
-		title: __( 'Textarea input' ),
+		title: __( 'Textarea Input' ),
 		icon: 'testimonial',
 		description: __(
 			'A textarea input to allow entering multiple lines of text.'
@@ -29,7 +29,7 @@ const variations = [
 	},
 	{
 		name: 'checkbox',
-		title: __( 'Checkbox input' ),
+		title: __( 'Checkbox Input' ),
 		description: __( 'A simple checkbox input.' ),
 		icon: 'forms',
 		attributes: { type: 'checkbox', inlineLabel: true },
@@ -39,7 +39,7 @@ const variations = [
 	},
 	{
 		name: 'email',
-		title: __( 'Email input' ),
+		title: __( 'Email Input' ),
 		icon: 'email',
 		description: __( 'Used for email addresses.' ),
 		attributes: { type: 'email' },
@@ -49,7 +49,7 @@ const variations = [
 	},
 	{
 		name: 'url',
-		title: __( 'URL input' ),
+		title: __( 'URL Input' ),
 		icon: 'admin-site',
 		description: __( 'Used for URLs.' ),
 		attributes: { type: 'url' },
@@ -59,7 +59,7 @@ const variations = [
 	},
 	{
 		name: 'tel',
-		title: __( 'Telephone input' ),
+		title: __( 'Telephone Input' ),
 		icon: 'phone',
 		description: __( 'Used for phone numbers.' ),
 		attributes: { type: 'tel' },
@@ -69,7 +69,7 @@ const variations = [
 	},
 	{
 		name: 'number',
-		title: __( 'Number input' ),
+		title: __( 'Number Input' ),
 		icon: 'edit-page',
 		description: __( 'A numeric input.' ),
 		attributes: { type: 'number' },

package/src/form-submission-notification/variations.js

@@ -6,8 +6,8 @@ import { __ } from '@wordpress/i18n';
 const variations = [
 	{
 		name: 'form-submission-success',
-		title: __( 'Form submission success' ),
-		description: __( 'Success message for form submissions' ),
+		title: __( 'Form Submission Success' ),
+		description: __( 'Success message for form submissions.' ),
 		attributes: {
 			type: 'success',
 		},
@@ -31,8 +31,8 @@ const variations = [
 	},
 	{
 		name: 'form-submission-error',
-		title: __( 'Form submission error' ),
-		description: __( 'Error/failure message for form submissions' ),
+		title: __( 'Form Submission Error' ),
+		description: __( 'Error/failure message for form submissions.' ),
 		attributes: {
 			type: 'error',
 		},

package/src/form-submit-button/block.json

@@ -3,7 +3,7 @@
 	"apiVersion": 3,
 	"__experimental": true,
 	"name": "core/form-submit-button",
-	"title": "Form submit button",
+	"title": "Form Submit Button",
 	"category": "common",
 	"icon": "button",
 	"parent": [ "core/form" ],

package/src/freeform/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Classic block converts content into blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>I'm classic!</p>
+<!-- /wp:paragraph -->"
+`;

package/src/freeform/test/index.native.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import {
+	fireEvent,
+	getBlock,
+	getEditorHtml,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+	within,
+} from 'test/helpers';
+
+const CLASSIC_BLOCK_HTML = `<p>I'm classic!</p>`;
+const DEFAULT_EDITOR_CAPABILITIES = {
+	unsupportedBlockEditor: true,
+	canEnableUnsupportedBlockEditor: true,
+};
+
+setupCoreBlocks();
+
+describe( 'Classic block', () => {
+	it( 'displays option to edit using web editor', async () => {
+		await initializeEditor( {
+			initialHtml: CLASSIC_BLOCK_HTML,
+			capabilities: DEFAULT_EDITOR_CAPABILITIES,
+		} );
+
+		const block = getBlock( screen, 'Classic' );
+		fireEvent.press( block );
+
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( block ).getByText( 'Unsupported' ) );
+
+		const actionButton = screen.getByText( 'Edit using web editor' );
+		expect( actionButton ).toBeVisible();
+	} );
+
+	it( 'converts content into blocks', async () => {
+		await initializeEditor( {
+			initialHtml: CLASSIC_BLOCK_HTML,
+			capabilities: DEFAULT_EDITOR_CAPABILITIES,
+		} );
+
+		const block = getBlock( screen, 'Classic' );
+		fireEvent.press( block );
+
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( block ).getByText( 'Unsupported' ) );
+
+		const actionButton = screen.getByText( 'Convert to blocks' );
+		expect( actionButton ).toBeVisible();
+
+		fireEvent.press( actionButton );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

package/src/group/edit.js

@@ -7,7 +7,6 @@ import {
 	useBlockProps,
 	InspectorControls,
 	useInnerBlocksProps,
-	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
@@ -98,11 +97,7 @@ function GroupEdit( {
 	} = attributes;
 
 	// Layout settings.
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = ! layout?.type
-		? { ...defaultLayout, ...layout, type: 'default' }
-		: { ...defaultLayout, ...layout };
-	const { type = 'default' } = usedLayout;
+	const { type = 'default' } = layout;
 	const layoutSupportEnabled =
 		themeSupportsLayout || type === 'flex' || type === 'grid';
 
@@ -112,7 +107,7 @@ function GroupEdit( {
 	} );
 	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
 		attributes,
-		usedLayoutType: usedLayout?.type,
+		usedLayoutType: type,
 		hasInnerBlocks,
 	} );
 

package/src/html/preview.js

@@ -22,12 +22,17 @@ const DEFAULT_STYLES = `
 `;
 
 export default function HTMLEditPreview( { content, isSelected } ) {
-	const settingStyles = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings()?.styles;
-	}, [] );
+	const settingStyles = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().styles
+	);
 
 	const styles = useMemo(
-		() => [ DEFAULT_STYLES, ...transformStyles( settingStyles ) ],
+		() => [
+			DEFAULT_STYLES,
+			...transformStyles(
+				settingStyles.filter( ( style ) => style.css )
+			),
+		],
 		[ settingStyles ]
 	);