fix: Block customization without editor settings

src/components/visual-editor/index.jsx

@@ -26,6 +26,11 @@ import { useEditorStyles } from './use-editor-styles';
 import { unlock } from '../../lock-unlock';
 import DefaultBlockAppender from '../default-block-appender';
 import { useEditorVisible } from './use-editor-visible';
+// The Vite query parameter breaks the linter's import resolution
+// eslint-disable-next-line import/no-unresolved
+import defaultThemeStyles from './default-theme-styles.scss?inline';
+// eslint-disable-next-line import/no-unresolved
+import commonStyles from './wp-common-styles.scss?inline';
 
 const {
 	ExperimentalBlockCanvas: BlockCanvas,
@@ -54,7 +59,7 @@ function VisualEditor( { hideTitle } ) {
 
 	const {
 		renderingMode,
-		hasThemeStyleSupport,
+		hasThemeStyles,
 		themeHasDisabledLayoutStyles,
 		themeSupportsLayout,
 		hasRootPaddingAwareAlignments,
@@ -63,31 +68,40 @@ function VisualEditor( { hideTitle } ) {
 		const _renderingMode = getRenderingMode();
 		const { getSettings } = unlock( select( blockEditorStore ) );
 		const _settings = getSettings();
+		// Implies editor settings provided theme styles via the REST API.
+		const settingsHasStyles = _settings.styles?.length > 0;
 
 		return {
 			renderingMode: _renderingMode,
-			hasThemeStyleSupport:
-				select( editPostStore ).isFeatureActive( 'themeStyles' ),
+			hasThemeStyles:
+				select( editPostStore ).isFeatureActive( 'themeStyles' ) &&
+				settingsHasStyles,
 			themeSupportsLayout: _settings.supportsLayout,
 			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
 			hasRootPaddingAwareAlignments:
 				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
 		};
 	}, [] );
 
-	const styles = useEditorStyles();
+	const styles = useEditorStyles(
+		// `commonStyles` represent manually added notable styles that are missing.
+		// The styles likely absent due to them being injected by the WP Admin
+		// context.
+		commonStyles,
+		// Add sensible default styles if theme styles are not present.
+		hasThemeStyles ? '' : defaultThemeStyles
+	);
 
 	const editorClasses = clsx( 'gutenberg-kit-visual-editor', {
-		'has-root-padding':
-			! hasThemeStyleSupport || ! hasRootPaddingAwareAlignments,
+		'has-root-padding': ! hasThemeStyles || ! hasRootPaddingAwareAlignments,
 	} );
 
 	const titleClasses = clsx(
 		'gutenberg-kit-visual-editor__post-title-wrapper',
 		'editor-visual-editor__post-title-wrapper',
 		{
 			'has-global-padding':
-				hasThemeStyleSupport && hasRootPaddingAwareAlignments,
+				hasThemeStyles && hasRootPaddingAwareAlignments,
 		}
 	);
 
@@ -114,7 +128,7 @@ function VisualEditor( { hideTitle } ) {
 		{
 			'is-layout-flow': ! themeSupportsLayout,
 			'has-global-padding':
-				hasThemeStyleSupport && hasRootPaddingAwareAlignments,
+				hasThemeStyles && hasRootPaddingAwareAlignments,
 		}
 	);
 

src/components/visual-editor/use-editor-styles.js

@@ -11,22 +11,20 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-// The Vite query parameter breaks the linter's import resolution
-// eslint-disable-next-line import/no-unresolved
-import defaultThemeStyles from './default-theme-styles.scss?inline';
-// eslint-disable-next-line import/no-unresolved
-import commonStyles from './wp-common-styles.scss?inline';
 
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 
 /**
  * Custom hook to retrieve and memoize editor styles.
  *
+ * @param {...any} additionalStyles Additional styles to add to the default styles.
+ *
  * @todo This should be exported from Core so no reimplementation is needed.
+ * @see https://github.com/WordPress/gutenberg/blob/a4d79e85a06e06b9123778e6991ac27b0bbe351d/packages/edit-post/src/components/layout/index.js#L86
  *
  * @return {any[]} An array of editor styles.
  */
-export function useEditorStyles() {
+export function useEditorStyles( ...additionalStyles ) {
 	const { hasThemeStyleSupport, editorSettings } = useSelect( ( select ) => {
 		return {
 			hasThemeStyleSupport:
@@ -35,12 +33,29 @@ export function useEditorStyles() {
 		};
 	}, [] );
 
+	const addedStyles = additionalStyles.join( '\n' );
+
+	// Compute the default styles.
 	return useMemo( () => {
+		const presetStyles =
+			editorSettings.styles?.filter(
+				( style ) =>
+					style.__unstableType && style.__unstableType !== 'theme'
+			) ?? [];
+
 		const defaultEditorStyles = [
 			...( editorSettings?.defaultEditorStyles ?? [] ),
+			...presetStyles,
 		];
 
-		if ( ! editorSettings.disableLayoutStyles && ! hasThemeStyleSupport ) {
+		// Has theme styles if the theme supports them and if some styles were not preset styles (in which case they're theme styles).
+		const hasThemeStyles =
+			hasThemeStyleSupport &&
+			presetStyles.length !== ( editorSettings.styles?.length ?? 0 );
+
+		// If theme styles are not present or displayed, ensure that
+		// base layout styles are still present in the editor.
+		if ( ! editorSettings.disableLayoutStyles && ! hasThemeStyles ) {
 			defaultEditorStyles.push( {
 				css: getLayoutStyles( {
 					style: {},
@@ -52,24 +67,20 @@ export function useEditorStyles() {
 			} );
 		}
 
-		if ( ! hasThemeStyleSupport ) {
-			defaultEditorStyles.push( {
-				css: defaultThemeStyles,
-			} );
-		}
-
-		const baseStyles = hasThemeStyleSupport
+		const baseStyles = hasThemeStyles
 			? editorSettings.styles ?? []
 			: defaultEditorStyles;
 
-		// `commonStyles` represent manually added notable styles that are missing.
-		// The styles likely absent due to them being injected by the WP Admin
-		// context.
-		return [ { css: commonStyles }, ...baseStyles ];
+		if ( addedStyles ) {
+			return [ ...baseStyles, { css: addedStyles } ];
+		}
+
+		return baseStyles;
 	}, [
 		editorSettings.defaultEditorStyles,
 		editorSettings.disableLayoutStyles,
 		editorSettings.styles,
 		hasThemeStyleSupport,
+		addedStyles,
 	] );
 }