fix: Block customization without editor settings (#180)

* feat: Set default colors and gradients for sites without settings

If a site does not have the Gutenberg plugin enabled, the editor
settings endpoint is unavailable. We set a default color palette and
gradients to enable customizing block styles.

* fix: Include preset editor styles

Ensures preset styles are loaded--e.g., utility classes for colors.

* chore: Update `useEditorStyles` copy with latest from Gutenberg core

Bring our copy of this private utility up to date.

* refactor: Utilize `useEditorSetting` added styles parameter

Embrace new abilities of this private function copy.

* fix: Default colors render for separators

Include default color utility classes. This is typically added by
WordPress' admin via PHP. The manual addition is necessary for sites
without the GutenbergKit plugin, which do not provide editor settings
and theme styles.

* fix: Apply default styles when editor settings provide none

Even if the theme style preferences is enabled, we must apply the
default styles if:

1. The theme provides no style via a block.json;
2. Or the site lacks the experimental Gutenberg REST API endpoint
   providing editor settings and styles.

* docs: Further document nuanced editor settings fall back logic

Author: dcalhoun

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,
 	] );
 }