Add Theme's base global styles endpoint (#35985)

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',

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<stylesheet>[^.\/]+(?:\/[^.\/]+)?)',
+			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;
+	}
 }

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.

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.
  *

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,

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
+	);
+};

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 ];
+}

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( () => {

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',