[BBT-123]: Add functionality to allow editors to manage multiple style variations

inc/class-rest-api.php

@@ -66,10 +66,10 @@ public function register_routes() {
  'themer/v1',
  '/style-variations',
  array(
- 'methods' => 'GET',
- 'callback' => array( $this, 'get_all_theme_style_variation_posts' ),
+ 'methods' => 'GET,POST',
+ 'callback' => array( $this, 'handle_theme_style_variations' ),
  'permission_callback' => function () {
- return true;
+ return current_user_can( 'edit_theme_options' );
  },
  )
  );
@@ -145,13 +145,16 @@ public function get_theme_json(): WP_REST_Response|WP_Error {
  }
 
  /**
- * Returns all 'wp_global_styles' posts linked to the current theme.
+ * GET request returns all of the `wp_global_styles` posts for the current theme.
+ * POST request publishes the post with the supplied ID and sets all other posts to draft.
  *
+ * @param WP_REST_Request $request - The request object.
  * @return WP_REST_Response|WP_Error
  */
- public function get_all_theme_style_variation_posts(): WP_REST_Response|WP_Error {
- $theme = get_stylesheet();
- $posts = get_posts(
+ public function handle_theme_style_variations( $request ): WP_REST_Response|WP_Error {
+ $method = $request->get_method();
+ $theme = get_stylesheet();
+ $posts = get_posts(
  array(
  'post_type' => 'wp_global_styles',
  'post_status' => array( 'publish', 'draft' ),
@@ -176,6 +179,34 @@ public function get_all_theme_style_variation_posts(): WP_REST_Response|WP_Error
  return new WP_Error( 'no_theme_styles', __( 'Unable to locate existing styles for the theme', 'themer' ) );
  }
 
- return rest_ensure_response( $posts );
+ if ( 'GET' === $method ) {
+ return rest_ensure_response( $posts );
+ }
+
+ if ( 'POST' === $method ) {
+ $json_body = $request->get_json_params();
+ $global_styles_id = $json_body['globalStylesId'];
+ $post_ids = array_column( $posts, 'ID' );
+ if ( ! $global_styles_id || ! in_array( $global_styles_id, $post_ids, true ) ) {
+ return new WP_Error( 'invalid_global_styles_id', __( 'Invalid global styles ID', 'themer' ) );
+ }
+
+ foreach ( $posts as $post ) {
+ $post_status = 'draft';
+ if ( $post->ID === $global_styles_id ) {
+ $post_status = 'publish';
+ }
+ wp_update_post(
+ array(
+ 'ID' => $post->ID,
+ 'post_status' => $post_status,
+ )
+ );
+ }
+
+ return rest_ensure_response( new WP_REST_Response( array( 'message' => __( 'Active theme style variation updated.', 'themer' ) ), 200 ) );
+ }
+
+ return rest_ensure_response( new WP_REST_Response( array( 'error' => __( 'Unsupported request method.', 'themer' ) ), 405 ) );
  }
 }

src/editor/components/ThemerComponent.js

@@ -4,6 +4,7 @@ import {
  Spinner,
  MenuGroup,
  MenuItem,
+ SelectControl,
  __experimentalNavigatorProvider as NavigatorProvider,
 } from '@wordpress/components';
 import { useSelect, dispatch } from '@wordpress/data';
@@ -37,6 +38,9 @@ const ThemerComponent = () => {
  const [ previewExampleIsActive, setPreviewExampleIsActive ] = useState();
  const [ schema, setSchema ] = useState( {} );
  const [ validThemeJson, setValidThemeJson ] = useState();
+ const [ globalStylesId, setGlobalStylesId ] = useState( 0 );
+ const [ styleVariations, setStyleVariations ] = useState( [] );
+ const [ publishedStylesId, setPublishedStylesId ] = useState( 0 );
 
  const setUserConfig = ( config ) => {
  dispatch( 'core' ).editEntityRecord(
@@ -47,33 +51,38 @@ const ThemerComponent = () => {
  );
  };
 
- const { globalStylesId, baseConfig, userConfig, savedUserConfig } =
- useSelect( ( select ) => {
+ const { baseConfig, userConfig, savedUserConfig } = useSelect(
+ ( select ) => {
+ if ( ! globalStylesId ) {
+ return {
+ baseConfig: {},
+ userConfig: {},
+ savedUserConfig: {},
+ };
+ }
+
  const {
- __experimentalGetCurrentGlobalStylesId,
  __experimentalGetCurrentThemeBaseGlobalStyles,
  getEditedEntityRecord,
  getEntityRecord,
  } = select( 'core' );
 
- const currentGlobalStylesId =
- __experimentalGetCurrentGlobalStylesId();
-
  return {
- globalStylesId: currentGlobalStylesId, // eslint-disable no-underscore-dangle -- require underscore dangle for experimental functions
  baseConfig: __experimentalGetCurrentThemeBaseGlobalStyles(), // eslint-disable no-underscore-dangle -- require underscore dangle for experimental functions
  userConfig: getEditedEntityRecord(
  'root',
  'globalStyles',
- currentGlobalStylesId
+ globalStylesId
  ),
  savedUserConfig: getEntityRecord(
  'root',
  'globalStyles',
- currentGlobalStylesId
+ globalStylesId
  ),
  };
- } );
+ },
+ [ globalStylesId ]
+ );
 
  /**
  * Returns merged base and user configs
@@ -118,6 +127,28 @@ const ThemerComponent = () => {
  setValidThemeJson( res );
  };
 
+ /**
+ * Retrieve all style variations for the theme and store the global style ID in state.
+ *
+ * @return {void}
+ */
+ const getStyleVariations = async () => {
+ const styleVariationsRes = await apiFetch( {
+ path: '/themer/v1/style-variations',
+ method: 'GET',
+ } );
+ setStyleVariations( styleVariationsRes );
+
+ const activeVariation = styleVariationsRes?.find(
+ ( variation ) => variation.post_status === 'publish'
+ );
+ if ( ! activeVariation ) {
+ return;
+ }
+ setPublishedStylesId( activeVariation.ID );
+ setGlobalStylesId( activeVariation.ID );
+ };
+
  /**
  * Resets preview blocks to default template
  */
@@ -137,6 +168,10 @@ const ThemerComponent = () => {
  validateThemeJson();
  }, [] );
 
+ useEffect( () => {
+ getStyleVariations();
+ }, [] );
+
  /**
  * Alert user if they try to leave Themer without saving.
  */
@@ -179,6 +214,25 @@ const ThemerComponent = () => {
  );
  };
 
+ /**
+ * Sets the active style variation for the theme.
+ */
+ const activate = async () => {
+ try {
+ await apiFetch( {
+ path: '/themer/v1/style-variations',
+ method: 'POST',
+ data: {
+ globalStylesId,
+ },
+ } );
+ setPublishedStylesId( globalStylesId );
+ } catch ( err ) {
+ // eslint-disable-next-line no-console
+ console.log( err );
+ }
+ };
+
  const clearAllCustomisations = () => {
  dispatch( 'core' ).editEntityRecord(
  'root',
@@ -196,6 +250,19 @@ const ThemerComponent = () => {
  );
  }
 
+ const selectOptions = [
+ {
+ disabled: true,
+ label: __( 'Select a style variation', 'themer' ),
+ value: '',
+ },
+ ,
+ ...styleVariations.map( ( variation ) => ( {
+ label: variation.post_name,
+ value: variation.ID,
+ } ) ),
+ ];
+
  return (
  <>
  <EditorContext.Provider
@@ -225,6 +292,15 @@ const ThemerComponent = () => {
  { validThemeJson === true && (
  <>
  <div className="themer-topbar">
+ <SelectControl
+ options={ selectOptions }
+ value={ globalStylesId }
+ onChange={ ( value ) =>
+ setGlobalStylesId(
+ parseInt( value, 10 )
+ )
+ }
+ />
  <Button
  isSecondary
  onClick={ () => reset() }
@@ -237,6 +313,14 @@ const ThemerComponent = () => {
  text="Save"
  disabled={ ! hasUnsavedChanges }
  />
+ <Button
+ isPrimary
+ onClick={ activate }
+ text={ __( 'Activate', 'themer' ) }
+ disabled={
+ publishedStylesId === globalStylesId
+ }
+ />
  <MoreMenuDropdown>
  { () => (
  <MenuGroup