Skip to content

Commit ae6968b

Browse files
ramonjdandrewserongtellthemachinesaaronrobertshawjasmussen
authored and
carstingaxion
committed
Global styles: block background UI controls (WordPress#60100)
* Adding background panel for blocks. * Default controls using block supports * Updating tests after rebase Removed unrequired change function * Set defaults for the global styles block group background image * Enabling theme file resolution for blocks * LINTO * Use global settings to check if background image is supported. * This commit checks for theme block styles in the block supports hook so a background block control can determine whether it has an inherited value. If there is an inherited value, the block control will provide an option to "remove" the theme style. This commit also sends resolved theme asset URI via the _links property so that these images can be used in block control previews. Added resolver tests for blocks Use `get_styles_for_block` in unit tests when testing block nodes Use `get_styles_for_block` in unit tests when testing block nodes Add since annotation backport changelog * update assertion comments * Now that background styles can be used in block styles, move them to styles complete ref * Pass resolved URIs to display inherited background image styles with relative paths Also, output any background styles, even if there's no background image Co-authored-by: ramonjd <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: tellthemachines <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: jameskoster <[email protected]>
1 parent f74567a commit ae6968b

File tree

19 files changed

+339
-86
lines changed

19 files changed

+339
-86
lines changed

‎backport-changelog/6.7/6836.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
https://github.com/WordPress/wordpress-develop/pull/6836
2+
3+
* https://github.com/WordPress/gutenberg/pull/60100

‎docs/reference-guides/theme-json-reference/theme-json-living.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,19 @@ Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-
206206
## Styles
207207

208208

209+
### background
210+
211+
Background styles.
212+
213+
| Property | Type | Props |
214+
| --- | --- |--- |
215+
| backgroundImage | string, object | |
216+
| backgroundPosition | string, object | |
217+
| backgroundRepeat | string, object | |
218+
| backgroundSize | string, object | |
219+
220+
---
221+
209222
### border
210223

211224
Border styles.

‎lib/block-supports/background.php‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,14 @@ function gutenberg_render_background_support( $block_content, $block ) {
5252
return $block_content;
5353
}
5454

55-
$background_styles = array();
56-
$background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array();
55+
$background_styles = array();
56+
$background_styles['backgroundImage'] = $block_attributes['style']['background']['backgroundImage'] ?? null;
57+
$background_styles['backgroundSize'] = $block_attributes['style']['background']['backgroundSize'] ?? null;
58+
$background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null;
59+
$background_styles['backgroundRepeat'] = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
5760

5861
if ( ! empty( $background_styles['backgroundImage'] ) ) {
59-
$background_styles['backgroundSize'] = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover';
60-
$background_styles['backgroundPosition'] = isset( $block_attributes['style']['background']['backgroundPosition'] ) ? $block_attributes['style']['background']['backgroundPosition'] : null;
61-
$background_styles['backgroundRepeat'] = isset( $block_attributes['style']['background']['backgroundRepeat'] ) ? $block_attributes['style']['background']['backgroundRepeat'] : null;
62-
62+
$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
6363
// If the background size is set to `contain` and no position is set, set the position to `center`.
6464
if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {
6565
$background_styles['backgroundPosition'] = 'center';

‎lib/class-wp-theme-json-gutenberg.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -503,10 +503,10 @@ class WP_Theme_JSON_Gutenberg {
503503
*/
504504
const VALID_STYLES = array(
505505
'background' => array(
506-
'backgroundImage' => 'top',
507-
'backgroundPosition' => 'top',
508-
'backgroundRepeat' => 'top',
509-
'backgroundSize' => 'top',
506+
'backgroundImage' => null,
507+
'backgroundPosition' => null,
508+
'backgroundRepeat' => null,
509+
'backgroundSize' => null,
510510
),
511511
'border' => array(
512512
'color' => null,

‎lib/class-wp-theme-json-resolver-gutenberg.php‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -805,6 +805,7 @@ public static function get_style_variations( $scope = 'theme' ) {
805805
* as the value of `_link` object in REST API responses.
806806
*
807807
* @since 6.6.0
808+
* @since 6.7.0 Added support for resolving block styles.
808809
*
809810
* @param WP_Theme_JSON_Gutenberg $theme_json A theme json instance.
810811
* @return array An array of resolved paths.
@@ -818,10 +819,11 @@ public static function get_resolved_theme_uris( $theme_json ) {
818819

819820
$theme_json_data = $theme_json->get_raw_data();
820821

821-
// Top level styles.
822-
$background_image_url = $theme_json_data['styles']['background']['backgroundImage']['url'] ?? null;
823822
// Using the same file convention when registering web fonts. See: WP_Font_Face_Resolver:: to_theme_file_uri.
824823
$placeholder = 'file:./';
824+
825+
// Top level styles.
826+
$background_image_url = $theme_json_data['styles']['background']['backgroundImage']['url'] ?? null;
825827
if (
826828
isset( $background_image_url ) &&
827829
is_string( $background_image_url ) &&
@@ -840,6 +842,33 @@ public static function get_resolved_theme_uris( $theme_json ) {
840842
$resolved_theme_uris[] = $resolved_theme_uri;
841843
}
842844

845+
// Block styles.
846+
if ( ! empty( $theme_json_data['styles']['blocks'] ) ) {
847+
foreach ( $theme_json_data['styles']['blocks'] as $block_name => $block_styles ) {
848+
if ( ! isset( $block_styles['background']['backgroundImage']['url'] ) ) {
849+
continue;
850+
}
851+
$background_image_url = $block_styles['background']['backgroundImage']['url'] ?? null;
852+
if (
853+
isset( $background_image_url ) &&
854+
is_string( $background_image_url ) &&
855+
// Skip if the src doesn't start with the placeholder, as there's nothing to replace.
856+
str_starts_with( $background_image_url, $placeholder ) ) {
857+
$file_type = wp_check_filetype( $background_image_url );
858+
$src_url = str_replace( $placeholder, '', $background_image_url );
859+
$resolved_theme_uri = array(
860+
'name' => $background_image_url,
861+
'href' => sanitize_url( get_theme_file_uri( $src_url ) ),
862+
'target' => "styles.blocks.{$block_name}.background.backgroundImage.url",
863+
);
864+
if ( isset( $file_type['type'] ) ) {
865+
$resolved_theme_uri['type'] = $file_type['type'];
866+
}
867+
$resolved_theme_uris[] = $resolved_theme_uri;
868+
}
869+
}
870+
}
871+
843872
return $resolved_theme_uris;
844873
}
845874

‎lib/global-styles-and-settings.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,7 @@ function gutenberg_add_global_styles_block_custom_css() {
258258
function gutenberg_add_global_styles_for_blocks() {
259259
global $wp_styles;
260260
$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
261+
$tree = WP_Theme_JSON_Resolver_Gutenberg::resolve_theme_file_uris( $tree );
261262
$block_nodes = $tree->get_styles_block_nodes();
262263
foreach ( $block_nodes as $metadata ) {
263264
$block_css = $tree->get_styles_for_block( $metadata );

‎packages/block-editor/src/components/global-styles/background-panel.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@ function BackgroundImageControls( {
269269
inheritedValue,
270270
onRemoveImage = noop,
271271
displayInPanel,
272+
themeFileURIs,
272273
} ) {
273274
const mediaUpload = useSelect(
274275
( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -392,7 +393,10 @@ function BackgroundImageControls( {
392393
name={
393394
<InspectorImagePreviewItem
394395
className="block-editor-global-styles-background-panel__image-preview"
395-
imgUrl={ url }
396+
imgUrl={ getResolvedThemeFilePath(
397+
url,
398+
themeFileURIs
399+
) }
396400
filename={ title }
397401
label={ imgLabel }
398402
/>
@@ -706,6 +710,7 @@ export default function BackgroundPanel( {
706710
onChange={ onChange }
707711
style={ value }
708712
inheritedValue={ inheritedValue }
713+
themeFileURIs={ themeFileURIs }
709714
displayInPanel
710715
onRemoveImage={ () => {
711716
setIsDropDownOpen( false );
@@ -727,6 +732,7 @@ export default function BackgroundPanel( {
727732
onChange={ onChange }
728733
style={ value }
729734
inheritedValue={ inheritedValue }
735+
themeFileURIs={ themeFileURIs }
730736
/>
731737
) }
732738
</div>

‎packages/block-editor/src/components/global-styles/hooks.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -373,6 +373,15 @@ export function useSettingsForBlockElement(
373373
}
374374
} );
375375

376+
[ 'backgroundImage', 'backgroundSize' ].forEach( ( key ) => {
377+
if ( ! supportedStyles.includes( key ) ) {
378+
updatedSettings.background = {
379+
...updatedSettings.background,
380+
[ key ]: false,
381+
};
382+
}
383+
} );
384+
376385
updatedSettings.shadow = supportedStyles.includes( 'shadow' )
377386
? updatedSettings.shadow
378387
: false;

‎packages/block-editor/src/components/global-styles/use-global-styles-output.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { GlobalStylesContext } from './context';
3131
import { useGlobalSetting } from './hooks';
3232
import { getDuotoneFilter } from '../duotone/utils';
3333
import { getGapCSSValue } from '../../hooks/gap';
34+
import { setBackgroundStyleDefaults } from '../../hooks/background';
3435
import { store as blockEditorStore } from '../../store';
3536
import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
3637
import { getValueFromObjectPath, setImmutably } from '../../utils/object';
@@ -387,6 +388,20 @@ export function getStylesDeclarations(
387388
[]
388389
);
389390

391+
/*
392+
* Set background defaults.
393+
* Applies to all background styles except the top-level site background.
394+
*/
395+
if ( ! isRoot && !! blockStyles.background ) {
396+
blockStyles = {
397+
...blockStyles,
398+
background: {
399+
...blockStyles.background,
400+
...setBackgroundStyleDefaults( blockStyles.background ),
401+
},
402+
};
403+
}
404+
390405
// The goal is to move everything to server side generated engine styles
391406
// This is temporary as we absorb more and more styles into the engine.
392407
const extraRules = getCSSRules( blockStyles );

‎packages/block-editor/src/hooks/background.js‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ import {
1616
useHasBackgroundPanel,
1717
hasBackgroundImageValue,
1818
} from '../components/global-styles/background-panel';
19+
import {
20+
globalStylesDataKey,
21+
globalStylesLinksDataKey,
22+
} from '../store/private-keys';
1923

2024
export const BACKGROUND_SUPPORT_KEY = 'background';
2125

@@ -134,10 +138,25 @@ export function BackgroundImagePanel( {
134138
setAttributes,
135139
settings,
136140
} ) {
137-
const style = useSelect(
138-
( select ) =>
139-
select( blockEditorStore ).getBlockAttributes( clientId )?.style,
140-
[ clientId ]
141+
const { style, inheritedValue, _links } = useSelect(
142+
( select ) => {
143+
const { getBlockAttributes, getSettings } =
144+
select( blockEditorStore );
145+
const _settings = getSettings();
146+
return {
147+
style: getBlockAttributes( clientId )?.style,
148+
_links: _settings[ globalStylesLinksDataKey ],
149+
/*
150+
* @TODO 1. Pass inherited value down to all block style controls,
151+
* See: packages/block-editor/src/hooks/style.js
152+
* @TODO 2. Add support for block style variations,
153+
* See implementation: packages/block-editor/src/hooks/block-style-variation.js
154+
*/
155+
inheritedValue:
156+
_settings[ globalStylesDataKey ]?.blocks?.[ name ],
157+
};
158+
},
159+
[ clientId, name ]
141160
);
142161

143162
if (
@@ -165,12 +184,14 @@ export function BackgroundImagePanel( {
165184

166185
return (
167186
<StylesBackgroundPanel
187+
inheritedValue={ inheritedValue }
168188
as={ BackgroundInspectorControl }
169189
panelId={ clientId }
170190
defaultValues={ BACKGROUND_DEFAULT_VALUES }
171191
settings={ updatedSettings }
172192
onChange={ onChange }
173193
value={ style }
194+
themeFileURIs={ _links?.[ 'wp:theme-file' ] }
174195
/>
175196
);
176197
}

0 commit comments

Comments
 (0)