@wordpress/editor 12.2.1 → 12.4.0-next.e230fbab09.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "12.2.1",
+	"version": "12.4.0-next.e230fbab09.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,31 +31,30 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.3.1",
-		"@wordpress/api-fetch": "^6.0.1",
-		"@wordpress/block-editor": "^8.1.2",
-		"@wordpress/blocks": "^11.2.1",
-		"@wordpress/components": "^19.4.1",
-		"@wordpress/compose": "^5.1.1",
-		"@wordpress/core-data": "^4.1.1",
-		"@wordpress/data": "^6.2.1",
-		"@wordpress/data-controls": "^2.3.1",
-		"@wordpress/date": "^4.3.1",
-		"@wordpress/deprecated": "^3.3.1",
-		"@wordpress/element": "^4.1.1",
-		"@wordpress/hooks": "^3.3.1",
-		"@wordpress/html-entities": "^3.3.1",
-		"@wordpress/i18n": "^4.3.1",
-		"@wordpress/icons": "^7.0.0",
-		"@wordpress/keyboard-shortcuts": "^3.1.1",
-		"@wordpress/keycodes": "^3.3.1",
-		"@wordpress/media-utils": "^3.1.1",
-		"@wordpress/notices": "^3.3.1",
-		"@wordpress/reusable-blocks": "^3.1.2",
-		"@wordpress/rich-text": "^5.1.1",
-		"@wordpress/server-side-render": "^3.1.2",
-		"@wordpress/url": "^3.4.1",
-		"@wordpress/wordcount": "^3.3.1",
+		"@wordpress/a11y": "^3.4.0-next.e230fbab09.0",
+		"@wordpress/api-fetch": "^6.1.0-next.e230fbab09.0",
+		"@wordpress/block-editor": "^8.3.0-next.e230fbab09.0",
+		"@wordpress/blocks": "^11.3.0-next.e230fbab09.0",
+		"@wordpress/components": "^19.7.0-next.e230fbab09.0",
+		"@wordpress/compose": "^5.2.0-next.e230fbab09.0",
+		"@wordpress/core-data": "^4.2.0-next.e230fbab09.0",
+		"@wordpress/data": "^6.4.0-next.e230fbab09.0",
+		"@wordpress/date": "^4.4.0-next.e230fbab09.0",
+		"@wordpress/deprecated": "^3.4.0-next.e230fbab09.0",
+		"@wordpress/element": "^4.3.0-next.e230fbab09.0",
+		"@wordpress/hooks": "^3.4.0-next.e230fbab09.0",
+		"@wordpress/html-entities": "^3.4.0-next.e230fbab09.0",
+		"@wordpress/i18n": "^4.4.0-next.e230fbab09.0",
+		"@wordpress/icons": "^7.1.0-next.e230fbab09.0",
+		"@wordpress/keyboard-shortcuts": "^3.2.0-next.e230fbab09.0",
+		"@wordpress/keycodes": "^3.4.0-next.e230fbab09.0",
+		"@wordpress/media-utils": "^3.2.0-next.e230fbab09.0",
+		"@wordpress/notices": "^3.4.0-next.e230fbab09.0",
+		"@wordpress/reusable-blocks": "^3.2.0-next.e230fbab09.0",
+		"@wordpress/rich-text": "^5.2.0-next.e230fbab09.0",
+		"@wordpress/server-side-render": "^3.2.0-next.e230fbab09.0",
+		"@wordpress/url": "^3.5.0-next.e230fbab09.0",
+		"@wordpress/wordcount": "^3.4.0-next.e230fbab09.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -69,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0f838547f37472e46e6d5a9d2e84b6c61f4bd3f0"
+	"gitHead": "308df03e6a96ded732f9c4e32471b1b4f8dea54a"
 }

package/src/components/deprecated.js

@@ -1,4 +1,4 @@
-// Block Creation Components
+// Block Creation Components.
 /**
  * WordPress dependencies
  */

package/src/components/deprecated.native.js

@@ -1,4 +1,4 @@
-// Block Creation Components
+// Block Creation Components.
 /**
  * WordPress dependencies
  */

package/src/components/document-outline/test/index.js

@@ -147,7 +147,7 @@ describe( 'DocumentOutline', () => {
 			const blocks = [ headingH2, nestedHeading ];
 			const wrapper = mount( <DocumentOutline blocks={ blocks } /> );
 
-			// Unnested heading and nested heading should appear as items
+			// Unnested heading and nested heading should appear as items.
 			const tableOfContentItems = wrapper.find(
 				tableOfContentItemsSelector
 			);

package/src/components/editor-help/index.native.js

@@ -133,7 +133,7 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 												<Text style={ sectionTitle }>
 													{ __( 'The basics' ) }
 												</Text>
-												{ /* Print out help topics */ }
+												{ /* Print out help topics. */ }
 												{ HELP_TOPICS.map(
 													( { label, icon } ) => {
 														const labelSlug = kebabCase(
@@ -187,7 +187,7 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 							</BottomSheetConsumer>
 						</View>
 					</BottomSheet.NavigationScreen>
-					{ /* Print out help detail screens */ }
+					{ /* Print out help detail screens. */ }
 					{ HELP_TOPICS.map( ( { view, label } ) => {
 						const labelSlug = kebabCase( label );
 						return (

package/src/components/entities-saved-states/entity-record-item.js

@@ -36,7 +36,7 @@ export default function EntityRecordItem( {
 		return parents[ parents.length - 1 ];
 	}, [] );
 
-	// Handle templates that might use default descriptive titles
+	// Handle templates that might use default descriptive titles.
 	const entityRecordTitle = useSelect(
 		( select ) => {
 			if ( 'postType' !== kind || 'wp_template' !== name ) {

package/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -8,7 +8,7 @@ import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 function EditorKeyboardShortcutsRegister() {
-	// Registering the shortcuts
+	// Registering the shortcuts.
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	useEffect( () => {
 		registerShortcut( {

package/src/components/index.js

@@ -1,7 +1,7 @@
-// Block Creation Components
+// Block Creation Components.
 export * from './autocompleters';
 
-// Post Related Components
+// Post Related Components.
 export { default as AutosaveMonitor } from './autosave-monitor';
 export { default as DocumentOutline } from './document-outline';
 export { default as DocumentOutlineCheck } from './document-outline/check';
@@ -64,7 +64,7 @@ export { default as ThemeSupportCheck } from './theme-support-check';
 export { default as UnsavedChangesWarning } from './unsaved-changes-warning';
 export { default as WordCount } from './word-count';
 
-// State Related Components
+// State Related Components.
 export { default as EditorProvider } from './provider';
 
 export * from './deprecated';

package/src/components/index.native.js

@@ -1,13 +1,13 @@
-// Post Related Components
+// Post Related Components.
 export { default as AutosaveMonitor } from './autosave-monitor';
 export { default as PostTitle } from './post-title';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
 
-// State Related Components
+// State Related Components.
 export { default as EditorProvider } from './provider';
 
-// Other Components
+// Other Components.
 export { default as EditorHelpTopics } from './editor-help';
 
 export * from './deprecated';

package/src/components/local-autosave-monitor/index.js

@@ -17,7 +17,10 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import AutosaveMonitor from '../autosave-monitor';
-import { localAutosaveGet, localAutosaveClear } from '../../store/controls';
+import {
+	localAutosaveGet,
+	localAutosaveClear,
+} from '../../store/local-autosave';
 import { store as editorStore } from '../../store';
 
 const requestIdleCallback = window.requestIdleCallback

package/src/components/post-author/test/check.js

@@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
 import PostAuthorCheck from '../check';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test
+	// This allows us to tweak the returned value on each test.
 	const mock = jest.fn();
 	return mock;
 } );

package/src/components/post-featured-image/index.js

@@ -66,12 +66,12 @@ function PostFeaturedImage( {
 			currentPostId
 		);
 		if ( has( media, [ 'media_details', 'sizes', mediaSize ] ) ) {
-			// use mediaSize when available
+			// Use mediaSize when available.
 			mediaWidth = media.media_details.sizes[ mediaSize ].width;
 			mediaHeight = media.media_details.sizes[ mediaSize ].height;
 			mediaSourceUrl = media.media_details.sizes[ mediaSize ].source_url;
 		} else {
-			// get fallbackMediaSize if mediaSize is not available
+			// Get fallbackMediaSize if mediaSize is not available.
 			const fallbackMediaSize = applyFilters(
 				'editor.PostFeaturedImage.imageSize',
 				'thumbnail',
@@ -81,7 +81,7 @@ function PostFeaturedImage( {
 			if (
 				has( media, [ 'media_details', 'sizes', fallbackMediaSize ] )
 			) {
-				// use fallbackMediaSize when mediaSize is not available
+				// Use fallbackMediaSize when mediaSize is not available.
 				mediaWidth =
 					media.media_details.sizes[ fallbackMediaSize ].width;
 				mediaHeight =
@@ -89,7 +89,7 @@ function PostFeaturedImage( {
 				mediaSourceUrl =
 					media.media_details.sizes[ fallbackMediaSize ].source_url;
 			} else {
-				// use full image size when mediaFallbackSize and mediaSize are not available
+				// Use full image size when mediaFallbackSize and mediaSize are not available.
 				mediaWidth = media.media_details.width;
 				mediaHeight = media.media_details.height;
 				mediaSourceUrl = media.source_url;

package/src/components/post-last-revision/index.js

@@ -5,19 +5,19 @@ import { sprintf, _n } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { backup } from '@wordpress/icons';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import PostLastRevisionCheck from './check';
-import { getWPAdminURL } from '../../utils/url';
 import { store as editorStore } from '../../store';
 
 function LastRevision( { lastRevisionId, revisionsCount } ) {
 	return (
 		<PostLastRevisionCheck>
 			<Button
-				href={ getWPAdminURL( 'revision.php', {
+				href={ addQueryArgs( 'revision.php', {
 					revision: lastRevisionId,
 					gutenberg: true,
 				} ) }

package/src/components/post-locked-modal/index.js

@@ -24,7 +24,6 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { getWPAdminURL } from '../../utils/url';
 import { store as editorStore } from '../../store';
 
 export default function PostLockedModal() {
@@ -164,7 +163,7 @@ export default function PostLockedModal() {
 		action: 'edit',
 		_wpnonce: postLockUtils.nonce,
 	} );
-	const allPostsUrl = getWPAdminURL( 'edit.php', {
+	const allPostsUrl = addQueryArgs( 'edit.php', {
 		post_type: get( postType, [ 'slug' ] ),
 	} );
 	const allPostsLabel = __( 'Exit editor' );

package/src/components/post-saved-state/index.js

@@ -154,7 +154,7 @@ export default function PostSavedState( {
 			shortcut={ displayShortcut.primary( 's' ) }
 			variant={ isLargeViewport ? 'tertiary' : undefined }
 			icon={ isLargeViewport ? undefined : cloudUpload }
-			label={ label }
+			label={ showIconLabels ? undefined : label }
 			aria-disabled={ isDisabled }
 		>
 			{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }

package/src/components/post-saved-state/test/index.js

@@ -23,13 +23,13 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
 } );
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test
+	// This allows us to tweak the returned value on each test.
 	const mock = jest.fn();
 	return mock;
 } );
 
 jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => {
-	// This allows us to tweak the returned value on each test
+	// This allows us to tweak the returned value on each test.
 	const mock = jest.fn();
 	return mock;
 } );

package/src/components/post-schedule/index.js

@@ -68,11 +68,11 @@ export default function PostSchedule() {
 	// We also make sure this a is not escaped by a "/"
 	const is12HourTime = /a(?!\\)/i.test(
 		settings.formats.time
-			.toLowerCase() // Test only the lower case a
-			.replace( /\\\\/g, '' ) // Replace "//" with empty strings
+			.toLowerCase() // Test only the lower case a.
+			.replace( /\\\\/g, '' ) // Replace "//" with empty strings.
 			.split( '' )
 			.reverse()
-			.join( '' ) // Reverse the string and test for "a" not followed by a slash
+			.join( '' ) // Reverse the string and test for "a" not followed by a slash.
 	);
 
 	function onChange( newDate ) {

package/src/components/post-slug/index.js

@@ -5,13 +5,12 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withInstanceId, compose } from '@wordpress/compose';
-import { safeDecodeURIComponent } from '@wordpress/url';
+import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import PostSlugCheck from './check';
-import { cleanForSlug } from '../../utils/url';
 import { store as editorStore } from '../../store';
 
 export class PostSlug extends Component {

package/src/components/post-switch-to-draft-button/index.js

@@ -1,10 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose, useViewportMatch } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,37 +22,44 @@ function PostSwitchToDraftButton( {
 	onClick,
 } ) {
 	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
 	if ( ! isPublished && ! isScheduled ) {
 		return null;
 	}
 
-	const onSwitch = () => {
-		let alertMessage;
-		if ( isPublished ) {
-			alertMessage = __(
-				'Are you sure you want to unpublish this post?'
-			);
-		} else if ( isScheduled ) {
-			alertMessage = __(
-				'Are you sure you want to unschedule this post?'
-			);
-		}
-		// eslint-disable-next-line no-alert
-		if ( window.confirm( alertMessage ) ) {
-			onClick();
-		}
+	let alertMessage;
+	if ( isPublished ) {
+		alertMessage = __( 'Are you sure you want to unpublish this post?' );
+	} else if ( isScheduled ) {
+		alertMessage = __( 'Are you sure you want to unschedule this post?' );
+	}
+
+	const handleConfirm = () => {
+		setShowConfirmDialog( false );
+		onClick();
 	};
 
 	return (
-		<Button
-			className="editor-post-switch-to-draft"
-			onClick={ onSwitch }
-			disabled={ isSaving }
-			variant="tertiary"
-		>
-			{ isMobileViewport ? __( 'Draft' ) : __( 'Switch to draft' ) }
-		</Button>
+		<>
+			<Button
+				className="editor-post-switch-to-draft"
+				onClick={ () => {
+					setShowConfirmDialog( true );
+				} }
+				disabled={ isSaving }
+				variant="tertiary"
+			>
+				{ isMobileViewport ? __( 'Draft' ) : __( 'Switch to draft' ) }
+			</Button>
+			<ConfirmDialog
+				isOpen={ showConfirmDialog }
+				onConfirm={ handleConfirm }
+				onCancel={ () => setShowConfirmDialog( false ) }
+			>
+				{ alertMessage }
+			</ConfirmDialog>
+		</>
 	);
 }
 

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -288,10 +288,10 @@ function HierarchicalTermSelector( { slug } ) {
 			return;
 		}
 
-		// check if the term we are adding already exists
+		// Check if the term we are adding already exists.
 		const existingTerm = findTerm( availableTerms, formParent, formName );
 		if ( existingTerm ) {
-			// if the term we are adding exists but is not selected select it
+			// If the term we are adding exists but is not selected select it.
 			if ( ! some( terms, ( term ) => term === existingTerm.id ) ) {
 				onUpdateTerms( [ ...terms, existingTerm.id ] );
 			}

package/src/components/post-text-editor/test/index.js

@@ -21,7 +21,7 @@ jest.mock( 'react-autosize-textarea', () => ( props ) => (
 ) );
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test
+	// This allows us to tweak the returned value on each test.
 	const mock = jest.fn();
 	return mock;
 } );

package/src/components/post-title/index.native.js

@@ -34,7 +34,7 @@ class PostTitle extends Component {
 		this.setRef = this.setRef.bind( this );
 	}
 	componentDidUpdate( prevProps ) {
-		// Unselect if any other block is selected and blur the RichText
+		// Unselect if any other block is selected and blur the RichText.
 		if (
 			this.props.isSelected &&
 			! prevProps.isAnyBlockSelected &&
@@ -142,7 +142,7 @@ class PostTitle extends Component {
 					tagName={ 'p' }
 					tagsToEliminate={ [ 'strong' ] }
 					unstableOnFocus={ this.props.onSelect }
-					onBlur={ this.props.onBlur } // always assign onBlur as a props
+					onBlur={ this.props.onBlur } // Always assign onBlur as a props.
 					multiline={ false }
 					style={ titleStyles }
 					styles={ styles }

package/src/components/post-trash/index.js

@@ -3,47 +3,35 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-function PostTrash( { isNew, postId, postType, ...props } ) {
+export default function PostTrash() {
+	const { isNew, postId } = useSelect( ( select ) => {
+		const store = select( editorStore );
+		return {
+			isNew: store.isEditedPostNew(),
+			postId: store.getCurrentPostId(),
+		};
+	}, [] );
+	const { trashPost } = useDispatch( editorStore );
+
 	if ( isNew || ! postId ) {
 		return null;
 	}
 
-	const onClick = () => props.trashPost( postId, postType );
-
 	return (
 		<Button
 			className="editor-post-trash"
 			isDestructive
 			variant="secondary"
-			onClick={ onClick }
+			onClick={ () => trashPost() }
 		>
 			{ __( 'Move to trash' ) }
 		</Button>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const {
-			isEditedPostNew,
-			getCurrentPostId,
-			getCurrentPostType,
-		} = select( editorStore );
-		return {
-			isNew: isEditedPostNew(),
-			postId: getCurrentPostId(),
-			postType: getCurrentPostType(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		trashPost: dispatch( editorStore ).trashPost,
-	} ) ),
-] )( PostTrash );

package/src/components/provider/index.js

@@ -92,7 +92,7 @@ function EditorProvider( {
 		};
 	}, [] );
 
-	// Synchronize the editor settings as they change
+	// Synchronize the editor settings as they change.
 	useEffect( () => {
 		updateEditorSettings( settings );
 	}, [ settings ] );

package/src/components/provider/index.native.js

@@ -31,12 +31,8 @@ import {
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { applyFilters } from '@wordpress/hooks';
-import {
-	validateThemeColors,
-	validateThemeGradients,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { getGlobalStyles } from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { getGlobalStyles, getColorsAndGradients } from '@wordpress/components';
 import { NEW_BLOCK_TYPES } from '@wordpress/block-library';
 
 const postTypeEntities = [
@@ -70,7 +66,7 @@ class NativeEditorProvider extends Component {
 	constructor() {
 		super( ...arguments );
 
-		// Keep a local reference to `post` to detect changes
+		// Keep a local reference to `post` to detect changes.
 		this.post = this.props.post;
 		this.props.addEntities( postTypeEntities );
 		this.props.receiveEntityRecords(
@@ -171,15 +167,15 @@ class NativeEditorProvider extends Component {
 			this.setState( { isHelpVisible: true } );
 		} );
 
-		// Request current block impressions from native app
+		// Request current block impressions from native app.
 		requestBlockTypeImpressions( ( storedImpressions ) => {
 			const impressions = { ...NEW_BLOCK_TYPES, ...storedImpressions };
 
-			// Persist impressions to JavaScript store
+			// Persist impressions to JavaScript store.
 			updateSettings( { impressions } );
 
 			// Persist impressions to native store if they do not include latest
-			// `NEW_BLOCK_TYPES` configuration
+			// `NEW_BLOCK_TYPES` configuration.
 			const storedImpressionKeys = Object.keys( storedImpressions );
 			const storedImpressionsCurrent = Object.keys(
 				NEW_BLOCK_TYPES
@@ -232,15 +228,18 @@ class NativeEditorProvider extends Component {
 		}
 	}
 
-	getThemeColors( { colors, gradients, rawStyles, rawFeatures } ) {
-		return {
-			...( rawStyles && rawFeatures
-				? getGlobalStyles( rawStyles, rawFeatures )
-				: {
-						colors: validateThemeColors( colors ),
-						gradients: validateThemeGradients( gradients ),
-				  } ),
-		};
+	getThemeColors( { rawStyles, rawFeatures } ) {
+		const { defaultEditorColors, defaultEditorGradients } = this.props;
+
+		if ( rawStyles && rawFeatures ) {
+			return getGlobalStyles( rawStyles, rawFeatures );
+		}
+
+		return getColorsAndGradients(
+			defaultEditorColors,
+			defaultEditorGradients,
+			rawFeatures
+		);
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -263,7 +262,7 @@ class NativeEditorProvider extends Component {
 
 		if ( this.props.mode === 'text' ) {
 			// The HTMLTextInput component does not update the store when user is doing changes
-			// Let's request the HTML from the component's state directly
+			// Let's request the HTML from the component's state directly.
 			html = applyFilters( 'native.persist-html' );
 		} else {
 			html = serialize( this.props.blocks );
@@ -306,9 +305,9 @@ class NativeEditorProvider extends Component {
 
 	toggleMode() {
 		const { mode, switchMode } = this.props;
-		// refresh html content first
+		// Refresh html content first.
 		this.serializeToNativeAction();
-		// make sure to blur the selected block and dismiss the keyboard
+		// Make sure to blur the selected block and dismiss the keyboard.
 		this.props.clearSelectedBlock();
 		switchMode( mode === 'visual' ? 'text' : 'visual' );
 	}
@@ -363,6 +362,10 @@ export default compose( [
 			getSettings: getBlockEditorSettings,
 		} = select( blockEditorStore );
 
+		const settings = getBlockEditorSettings();
+		const defaultEditorColors = settings?.colors ?? [];
+		const defaultEditorGradients = settings?.gradients ?? [];
+
 		const selectedBlockClientId = getSelectedBlockClientId();
 		return {
 			mode: getEditorMode(),
@@ -370,7 +373,8 @@ export default compose( [
 			blocks: getEditorBlocks(),
 			title: getEditedPostAttribute( 'title' ),
 			getEditedPostContent,
-			getBlockEditorSettings,
+			defaultEditorColors,
+			defaultEditorGradients,
 			selectedBlockIndex: getBlockIndex( selectedBlockClientId ),
 			blockCount: getGlobalBlockCount(),
 			paragraphCount: getGlobalBlockCount( 'core/paragraph' ),