diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 990cd6a534921d..c18fac98a201ff 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -30,6 +30,7 @@ import { GlobalStylesContext } from './context'; import { useGlobalSetting } from './hooks'; import { getDuotoneFilter } from '../duotone/utils'; import { getGapCSSValue } from '../../hooks/gap'; +import { setBackgroundStyleDefaults } from '../../hooks/background'; import { store as blockEditorStore } from '../../store'; import { LAYOUT_DEFINITIONS } from '../../layouts/definitions'; import { getValueFromObjectPath, setImmutably } from '../../utils/object'; @@ -391,6 +392,16 @@ export function getStylesDeclarations( [] ); + // Set background defaults. + // Applies to all blocks/global styles. + blockStyles = { + ...blockStyles, + background: { + ...blockStyles.background, + ...setBackgroundStyleDefaults( blockStyles.background ), + }, + }; + // The goal is to move everything to server side generated engine styles // This is temporary as we absorb more and more styles into the engine. const extraRules = getCSSRules( blockStyles ); diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js index e4760a810ecbc2..c7e53ec4fcd67e 100644 --- a/packages/edit-site/src/components/global-styles/background-panel.js +++ b/packages/edit-site/src/components/global-styles/background-panel.js @@ -8,6 +8,11 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; */ import { unlock } from '../../lock-unlock'; +// Initial control values where no block style is set. +const BACKGROUND_BLOCK_DEFAULT_VALUES = { + backgroundSize: 'cover', +}; + const { useGlobalStyle, useGlobalSetting, @@ -23,12 +28,21 @@ export default function BackgroundPanel() { } ); const [ settings ] = useGlobalSetting( '' ); + const defaultControls = { + backgroundImage: true, + backgroundSize: + !! style?.background?.backgroundImage || + !! inheritedStyle?.background?.backgroundImage, + }; + return ( ); }