From 88d29569067ddbd7eb7a47fed9bf70b4aa592b46 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 2 Nov 2021 12:23:39 +0100 Subject: [PATCH] Add Theme's base global styles endpoint (#35985) --- ...-rest-block-editor-settings-controller.php | 6 -- ...utenberg-rest-global-styles-controller.php | 58 +++++++++++++++++++ lib/global-styles.php | 7 --- packages/core-data/src/actions.js | 19 ++++++ packages/core-data/src/reducer.js | 21 +++++++ packages/core-data/src/resolvers.js | 14 +++++ packages/core-data/src/selectors.js | 15 +++++ .../global-styles/global-styles-provider.js | 9 ++- .../provider/use-block-editor-settings.js | 1 - 9 files changed, 133 insertions(+), 17 deletions(-) diff --git a/lib/class-wp-rest-block-editor-settings-controller.php b/lib/class-wp-rest-block-editor-settings-controller.php index 717e2e7e56270..fb66a42292acc 100644 --- a/lib/class-wp-rest-block-editor-settings-controller.php +++ b/lib/class-wp-rest-block-editor-settings-controller.php @@ -134,12 +134,6 @@ public function get_item_schema() { 'context' => array( 'post-editor', 'site-editor', 'widgets-editor', 'mobile' ), ), - '__experimentalGlobalStylesBaseConfig' => array( - 'description' => __( 'Settings and styles consolidated from core and theme origins.', 'gutenberg' ), - 'type' => 'object', - 'context' => array( 'site-editor' ), - ), - '__experimentalStyles' => array( 'description' => __( 'Styles consolidated from core, theme, and user origins.', 'gutenberg' ), 'type' => 'object', diff --git a/lib/compat/wordpress-5.9/class-gutenberg-rest-global-styles-controller.php b/lib/compat/wordpress-5.9/class-gutenberg-rest-global-styles-controller.php index a7d89c8fe3bbf..e0278df6bf622 100644 --- a/lib/compat/wordpress-5.9/class-gutenberg-rest-global-styles-controller.php +++ b/lib/compat/wordpress-5.9/class-gutenberg-rest-global-styles-controller.php @@ -24,6 +24,25 @@ public function __construct() { * @return void */ public function register_routes() { + // List themes global styles. + register_rest_route( + $this->namespace, + '/' . $this->rest_base . '/themes/(?P[^.\/]+(?:\/[^.\/]+)?)', + array( + array( + 'methods' => WP_REST_Server::READABLE, + 'callback' => array( $this, 'get_theme_item' ), + 'permission_callback' => array( $this, 'get_theme_item_permissions_check' ), + 'args' => array( + 'stylesheet' => array( + 'description' => __( 'The theme identifier', 'gutenberg' ), + 'type' => 'string', + ), + ), + ), + ) + ); + // Lists/updates a single gloval style variation based on the given id. register_rest_route( $this->namespace, @@ -327,4 +346,43 @@ public function get_item_schema() { return $this->add_additional_fields_schema( $this->schema ); } + + /** + * Checks if a given request has access to read a single theme global styles config. + * + * @param WP_REST_Request $request Full details about the request. + * @return true|WP_Error True if the request has read access for the item, WP_Error object otherwise. + */ + public function get_theme_item_permissions_check( $request ) { + return $this->permissions_check( $request ); + } + + /** + * Returns the given theme global styles config. + * + * @param WP_REST_Request $request The request instance. + * + * @return WP_REST_Response|WP_Error + */ + public function get_theme_item( $request ) { + if ( wp_get_theme()->get_stylesheet() !== $request['stylesheet'] ) { + // This endpoint only supports the active theme for now. + return new WP_Error( + 'rest_theme_not_found', + __( 'Theme not found.', 'gutenberg' ), + array( 'status' => 404 ) + ); + } + + $theme = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( array(), 'theme' ); + $styles = $theme->get_raw_data()['styles']; + $settings = $theme->get_settings(); + $result = array( + 'settings' => $settings, + 'styles' => $styles, + ); + $response = rest_ensure_response( $result ); + + return $response; + } } diff --git a/lib/global-styles.php b/lib/global-styles.php index 343f5d750988f..8b0a8a3a51d93 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -84,13 +84,6 @@ function_exists( 'gutenberg_is_edit_site_page' ) && $settings['__experimentalStyles'] = $consolidated->get_raw_data()['styles']; } - if ( 'site-editor' === $context && gutenberg_experimental_is_site_editor_available() ) { - $theme = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $settings, 'theme' ); - - $settings['__experimentalGlobalStylesBaseConfig']['styles'] = $theme->get_raw_data()['styles']; - $settings['__experimentalGlobalStylesBaseConfig']['settings'] = $theme->get_settings(); - } - if ( 'other' === $context ) { // Make sure the styles array exists. // In some contexts, like the navigation editor, it doesn't. diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js index 430090ccb989d..9f2874b941965 100644 --- a/packages/core-data/src/actions.js +++ b/packages/core-data/src/actions.js @@ -134,6 +134,25 @@ export function __experimentalReceiveCurrentGlobalStylesId( }; } +/** + * Returns an action object used in signalling that the theme base global styles have been received + * + * @param {string} stylesheet The theme's identifier + * @param {Object} globalStyles The global styles object. + * + * @return {Object} Action object. + */ +export function __experimentalReceiveThemeBaseGlobalStyles( + stylesheet, + globalStyles +) { + return { + type: 'RECEIVE_THEME_GLOBAL_STYLES', + stylesheet, + globalStyles, + }; +} + /** * Returns an action object used in signalling that the index has been received. * diff --git a/packages/core-data/src/reducer.js b/packages/core-data/src/reducer.js index 6f75216be6a54..130407e6f277a 100644 --- a/packages/core-data/src/reducer.js +++ b/packages/core-data/src/reducer.js @@ -136,6 +136,26 @@ export function currentGlobalStylesId( state = undefined, action ) { return state; } +/** + * Reducer managing the theme base global styles. + * + * @param {string} state Current state. + * @param {Object} action Dispatched action. + * + * @return {string} Updated state. + */ +export function themeBaseGlobalStyles( state = {}, action ) { + switch ( action.type ) { + case 'RECEIVE_THEME_GLOBAL_STYLES': + return { + ...state, + [ action.stylesheet ]: action.globalStyles, + }; + } + + return state; +} + /** * Higher Order Reducer for a given entity config. It supports: * @@ -549,6 +569,7 @@ export default combineReducers( { currentTheme, currentGlobalStylesId, currentUser, + themeBaseGlobalStyles, taxonomies, entities, undo, diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js index 9667f457a5f77..0340693cde0c3 100644 --- a/packages/core-data/src/resolvers.js +++ b/packages/core-data/src/resolvers.js @@ -436,3 +436,17 @@ export const __experimentalGetCurrentGlobalStylesId = () => async ( { ); } }; + +export const __experimentalGetCurrentThemeBaseGlobalStyles = () => async ( { + resolveSelect, + dispatch, +} ) => { + const currentTheme = await resolveSelect.getCurrentTheme(); + const themeGlobalStyles = await apiFetch( { + path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }`, + } ); + await dispatch.__experimentalReceiveThemeBaseGlobalStyles( + currentTheme.stylesheet, + themeGlobalStyles + ); +}; diff --git a/packages/core-data/src/selectors.js b/packages/core-data/src/selectors.js index 02fa412723a41..2a04ba0684eb1 100644 --- a/packages/core-data/src/selectors.js +++ b/packages/core-data/src/selectors.js @@ -906,3 +906,18 @@ export function __experimentalGetTemplateForLink( state, link ) { } return template; } + +/** + * Retrieve the current theme's base global styles + * + * @param {Object} state Editor state. + * + * @return {Object?} The Global Styles object. + */ +export function __experimentalGetCurrentThemeBaseGlobalStyles( state ) { + const currentTheme = getCurrentTheme( state ); + if ( ! currentTheme ) { + return null; + } + return state.themeBaseGlobalStyles[ currentTheme.stylesheet ]; +} diff --git a/packages/edit-site/src/components/global-styles/global-styles-provider.js b/packages/edit-site/src/components/global-styles/global-styles-provider.js index d9b2b5b13e20b..c9c14c36a7d94 100644 --- a/packages/edit-site/src/components/global-styles/global-styles-provider.js +++ b/packages/edit-site/src/components/global-styles/global-styles-provider.js @@ -23,7 +23,6 @@ import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies */ -import { store as editSiteStore } from '../../store'; import { PRESET_METADATA } from './utils'; import { GlobalStylesContext } from './context'; @@ -131,8 +130,9 @@ function useGlobalStylesUserConfig() { function useGlobalStylesBaseConfig() { const baseConfig = useSelect( ( select ) => { - return select( editSiteStore ).getSettings() - .__experimentalGlobalStylesBaseConfig; + return select( + coreStore + ).__experimentalGetCurrentThemeBaseGlobalStyles(); }, [] ); return baseConfig; @@ -146,6 +146,9 @@ function useGlobalStylesContext() { ] = useGlobalStylesUserConfig(); const baseConfig = useGlobalStylesBaseConfig(); const mergedConfig = useMemo( () => { + if ( ! baseConfig || ! userConfig ) { + return {}; + } return mergeBaseAndUserConfigs( baseConfig, userConfig ); }, [ userConfig, baseConfig ] ); const context = useMemo( () => { 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 c9235140c01f1..aaed50728fb37 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -94,7 +94,6 @@ function useBlockEditorSettings( settings, hasTemplate ) { '__experimentalBlockPatternCategories', '__experimentalBlockPatterns', '__experimentalFeatures', - '__experimentalGlobalStylesBaseConfig', '__experimentalPreferredStyleVariations', '__experimentalSetIsInserterOpened', '__unstableGalleryWithImageBlocks',