From 17793169efaa0023b361515c00b5594579735641 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 29 Apr 2024 19:16:38 +1000 Subject: [PATCH] Testing get_theme_file_uri on the backend and duping the background image on the frontend. --- lib/block-supports/background.php | 2 +- .../global-styles/use-global-styles-output.js | 29 ++++++++++++------- packages/block-editor/src/hooks/background.js | 27 +++++++++++------ packages/block-editor/src/hooks/style.js | 16 ++++++---- .../provider/use-block-editor-settings.js | 1 + .../src/styles/background/index.ts | 29 +++++++++++++++++-- packages/style-engine/src/types.ts | 3 ++ 7 files changed, 78 insertions(+), 29 deletions(-) diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php index 71089468b5747..10169f062039a 100644 --- a/lib/block-supports/background.php +++ b/lib/block-supports/background.php @@ -48,7 +48,7 @@ function gutenberg_get_background_support_styles( $background_styles = array() ) if ( ! str_starts_with( $background_styles['backgroundImage']['url'], '/' ) ) { $background_styles['backgroundImage']['url'] = '/' . $background_styles['backgroundImage']['url']; } - $background_styles['backgroundImage']['url'] = esc_url( get_stylesheet_directory_uri() . $background_styles['backgroundImage']['url'] ); + $background_styles['backgroundImage']['url'] = esc_url( get_theme_file_uri( $background_styles['backgroundImage']['url'] ) ); } return gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) ); } 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 19b3daf8b0729..a0d971ca27183 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 @@ -408,7 +408,10 @@ export function getStylesDeclarations( // 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 ); + const extraRules = getCSSRules( blockStyles, { + ...editorSettings, + isRoot, + } ); extraRules.forEach( ( rule ) => { // Don't output padding properties if padding variables are set or if we're not editing a full template. if ( @@ -1214,13 +1217,17 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) { const hasBlockGapSupport = blockGap !== null; const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support. - const { themeDirURI, disableLayoutStyles } = useSelect( ( select ) => { - const _settings = select( blockEditorStore ).getSettings(); - return { - themeDirURI: _settings?.__experimentalCurrentTheme?.stylesheetURI, - disableLayoutStyles: !! _settings.disableLayoutStyles, - }; - } ); + const { stylesheetURI, templateURI, disableLayoutStyles } = useSelect( + ( select ) => { + const _settings = select( blockEditorStore ).getSettings(); + return { + stylesheetURI: + _settings?.__experimentalCurrentTheme?.stylesheetURI, + templateURI: _settings?.__experimentalCurrentTheme?.templateURI, + disableLayoutStyles: !! _settings.disableLayoutStyles, + }; + } + ); const blockContext = useContext( BlockContext ); @@ -1252,7 +1259,8 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) { disableLayoutStyles, isTemplate, { - themeDirURI, + stylesheetURI, + templateURI, } ); const svgs = toSvgFilters( updatedConfig, blockSelectors ); @@ -1302,7 +1310,8 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) { disableLayoutStyles, isTemplate, getBlockStyles, - themeDirURI, + stylesheetURI, + templateURI, ] ); } diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js index 9f2aa5266db91..894f621643c57 100644 --- a/packages/block-editor/src/hooks/background.js +++ b/packages/block-editor/src/hooks/background.js @@ -55,10 +55,10 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) { /** * Updates a styles object with default background values. * - * @param {Object} blockStyles A styles object. - * @param {Object} options Optional settings. - * @param {string} options.themeDirURI The URI of the current theme directory. - * @param {string} options.selector The block selector. + * @param {Object} blockStyles A styles object. + * @param {Object} options Optional settings. + * @param {string} options.stylesheetURI The URI of the current theme directory. + * @param {string} options.selector The block selector. * @return {Object} Updated styles. */ export function setBackgroundStyleDefaults( blockStyles, options ) { @@ -72,12 +72,19 @@ export function setBackgroundStyleDefaults( blockStyles, options ) { const backgroundImage = blockStyles?.background?.backgroundImage; const newBackgroundStyles = {}; - if ( +/* if ( backgroundImage?.source === 'theme' && !! backgroundImage?.url && - !! options?.themeDirURI + !! options?.stylesheetURI && + !! options?.templateURI ) { - const url = `${ options.themeDirURI }${ + const activeThemeImageResource = `${ options.stylesheetURI }${ + backgroundImage.url.startsWith( '/' ) + ? backgroundImage.url + : `/${ backgroundImage.url }` + }`; + + const parentThemeImageResource = `${ options.templateURI }${ backgroundImage.url.startsWith( '/' ) ? backgroundImage.url : `/${ backgroundImage.url }` @@ -85,9 +92,11 @@ export function setBackgroundStyleDefaults( blockStyles, options ) { newBackgroundStyles.backgroundImage = { ...backgroundImage, - url: encodeURI( safeDecodeURI( url ) ), + url: `${ encodeURI( + safeDecodeURI( activeThemeImageResource ) + ) }, ${ encodeURI( safeDecodeURI( parentThemeImageResource ) ) }`, }; - } + }*/ // Set block background defaults. if ( options?.selector !== ROOT_BLOCK_SELECTOR && !! backgroundImage ) { diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 3c482eef848f9..120e55bf36dcc 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -61,11 +61,11 @@ const hasStyleSupport = ( nameOrType ) => * * @return {Object} Flattened CSS variables declaration. */ -export function getInlineStyles( styles = {} ) { +export function getInlineStyles( styles = {}, options ) { const output = {}; // 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. - getCSSRules( styles ).forEach( ( rule ) => { + getCSSRules( styles, options ).forEach( ( rule ) => { output[ rule.key ] = rule.value; } ); @@ -329,7 +329,9 @@ export function addSaveProps( } props.style = { - ...getInlineStyles( style ), + ...getInlineStyles( style, { + ...editorSettings, + } ), ...props.style, }; @@ -385,10 +387,11 @@ const elementTypes = [ ]; function useBlockProps( { name, style } ) { - const { themeDirURI } = useSelect( ( select ) => { + const { stylesheetURI, templateURI } = useSelect( ( select ) => { const _settings = select( blockEditorStore ).getSettings(); return { - themeDirURI: _settings?.__experimentalCurrentTheme?.stylesheetURI, + stylesheetURI: _settings?.__experimentalCurrentTheme?.stylesheetURI, + templateURI: _settings?.__experimentalCurrentTheme?.templateURI, }; } ); const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId( @@ -479,7 +482,8 @@ function useBlockProps( { name, style } ) { { style }, skipSerializationPathsEdit, { - themeDirURI, + stylesheetURI, + templateURI, } ); } diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 93c2d53632571..9a7ea71f75b9e 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -296,6 +296,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) { __experimentalUserCanCreatePages: userCanCreatePages, __experimentalCurrentTheme: { stylesheetURI: currentTheme?.stylesheet_uri, + templateURI: currentTheme?.template_uri, }, pageOnFront, pageForPosts, diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts index a8c8679888e15..2b11af78bffd5 100644 --- a/packages/style-engine/src/styles/background/index.ts +++ b/packages/style-engine/src/styles/background/index.ts @@ -8,15 +8,38 @@ const backgroundImage = { name: 'backgroundImage', generate: ( style: Style, options: StyleOptions ) => { const _backgroundImage = style?.background?.backgroundImage; + if ( typeof _backgroundImage === 'object' && _backgroundImage?.url ) { + let url = _backgroundImage.url; + if ( + _backgroundImage?.source === 'theme' && + !! options?.stylesheetURI && + !! options?.templateURI + ) { + const activeThemeImageResource = `${ options.stylesheetURI }${ + url.startsWith( '/' ) ? url : `/${ url }` + }`; + + const parentThemeImageResource = `${ options.templateURI }${ + url.startsWith( '/' ) ? url : `/${ url }` + }`; + + url = `url('${ encodeURI( + safeDecodeURI( activeThemeImageResource ) + ) }'), url('${ encodeURI( + safeDecodeURI( parentThemeImageResource ) + ) }')`; + } else { + url = `url( '${ encodeURI( + safeDecodeURI( _backgroundImage.url ) + ) }' )`; + } return [ { selector: options.selector, key: 'backgroundImage', // Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string. - value: `url( '${ encodeURI( - safeDecodeURI( _backgroundImage.url ) - ) }' )`, + value: url, }, ]; } diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts index 5b361836a8e37..a3e18b7f24f1c 100644 --- a/packages/style-engine/src/types.ts +++ b/packages/style-engine/src/types.ts @@ -90,6 +90,9 @@ export interface StyleOptions { * CSS selector for the generated style. */ selector?: string; + templateURI?: string; + stylesheetURI?: string; + isRoot: boolean; } export interface GeneratedCSSRule {