- { theme.title }
-
-
- { themeList.length }
+ { localThemes.length }
-
+
- +
@@ -144,21 +108,10 @@ const _ThemeGardenFilterBar = ( { export const ThemeGardenFilterBar = compose( withSelect( select => ( { - initialProps: select( 'tumblr3/theme-garden-store' ).getInitialFilterBarProps(), + baseUrl: select( 'tumblr3/theme-garden-store' ).getBaseUrl(), + selectedCategory: select( 'tumblr3/theme-garden-store' ).getSelectedCategory(), + categories: select( 'tumblr3/theme-garden-store' ).getCategories(), + search: select( 'tumblr3/theme-garden-store' ).getSearch(), themes: select( 'tumblr3/theme-garden-store' ).getThemes(), - } ) ), - withDispatch( dispatch => ( { - prefetchThemes: () => { - return dispatch( 'tumblr3/theme-garden-store' ).prefetchThemes(); - }, - fetchThemes: category => { - return dispatch( 'tumblr3/theme-garden-store' ).fetchThemes( category ); - }, - searchThemes: query => { - return dispatch( 'tumblr3/theme-garden-store' ).searchThemes( query ); - }, - receiveThemes: themes => { - return dispatch( 'tumblr3/theme-garden-store' ).receiveThemes( themes ); - }, } ) ) )( _ThemeGardenFilterBar ); diff --git a/assets/js/src/components/theme-garden-list.js b/assets/js/src/components/theme-garden-list.js index d31535c..d9aa799 100644 --- a/assets/js/src/components/theme-garden-list.js +++ b/assets/js/src/components/theme-garden-list.js @@ -1,5 +1,5 @@ import { useEffect, useState } from '@wordpress/element'; -import { withSelect } from '@wordpress/data'; +import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { _x } from '@wordpress/i18n'; import { ThemeGardenNoThemes } from './theme-garden-no-themes'; @@ -8,19 +8,29 @@ import './theme-garden-store'; /** * Displays a list of Tumblr themes. * - * Class names reference built-in wp-admin styles, and styles declared in _theme_garden.scss. + * CSS classNames reference built-in wp-admin styles, and styles declared in _theme_garden.scss. * - * @param {Object} props - * @param {Array} props.themes - * @param {boolean} props.isFetchingThemes + * @param {Object} props + * @param {Array} props.themes + * @param {boolean} props.isFetchingThemes + * @param {Function} props.fetchThemeById */ -const _ThemeGardenList = ( { themes, isFetchingThemes } ) => { +const _ThemeGardenList = ( { themes, isFetchingThemes, fetchThemeById } ) => { const [ localThemes, setLocalThemes ] = useState( themes ); useEffect( () => { setLocalThemes( themes ); }, [ themes ] ); + const handleDetailsClick = async ( { currentTarget: { value: themeId } } ) => { + const currentUrl = new URL( window.location.href ); + const params = new URLSearchParams( currentUrl.search ); + params.append( 'theme', themeId ); + currentUrl.search = params.toString(); + await fetchThemeById( themeId ); + window.history.pushState( {}, '', currentUrl.toString() ); + }; + if ( isFetchingThemes ) { return (
@@ -35,25 +45,42 @@ const _ThemeGardenList = ( { themes, isFetchingThemes } ) => {
return (
}
+ */
+ const onBrowserNavigation = useCallback( async () => {
+ const urlParams = new URLSearchParams( window.location.search );
+ const category = urlParams.get( 'category' ) || 'featured';
+ const searchParam = urlParams.get( 'search' ) || '';
+ const theme = urlParams.get( 'theme' ) || '';
+
+ if ( searchParam !== '' && searchParam !== search ) {
+ await fetchThemesByQuery( searchParam );
+ } else if ( category !== '' && category !== selectedCategory ) {
+ await fetchThemesByCategory( category );
+ }
+
+ if ( theme !== '' ) {
+ beforeFetchTheme();
+ const response = await fetchTheme( theme );
+ receiveTheme( response, theme );
+ } else {
+ closeOverlay();
+ }
+ }, [
+ selectedCategory,
+ search,
+ beforeFetchTheme,
+ closeOverlay,
+ fetchTheme,
+ fetchThemesByCategory,
+ fetchThemesByQuery,
+ receiveTheme,
+ ] );
+ /**
+ * Detect backwards and forwards browser navigation.
+ */
+ useEffect( () => {
+ window.addEventListener( 'popstate', onBrowserNavigation );
+ return () => {
+ window.removeEventListener( 'popstate', onBrowserNavigation );
+ };
+ }, [ onBrowserNavigation ] );
+
+ const fetchThemeById = useCallback(
+ async themeId => {
+ beforeFetchTheme();
+ const response = await fetchTheme( themeId );
+ receiveTheme( response, themeId );
+ },
+ [ beforeFetchTheme, receiveTheme, fetchTheme ]
+ );
+
return (
-
+
+
+ %s
+
+
+ ',
+ esc_html( $media_title ),
+ esc_html( $media_artist ),
+ esc_html( $media_album ),
+ $poster_url ? sprintf( '
', esc_url( $poster_url ) ) : '',
+ esc_url( $media_url )
+ );
+
+ return $output;
+ }
+}
diff --git a/src/Customizer.php b/src/Customizer.php
index 0e2f315..f3e3b64 100644
--- a/src/Customizer.php
+++ b/src/Customizer.php
@@ -29,6 +29,7 @@ public function initialize( $is_tumblr3_active ): void {
// Only run the rest of the actions if the Tumblr3 theme is active.
if ( $is_tumblr3_active ) {
+ add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_customizer_scripts' ) );
add_action( 'customize_register', array( $this, 'global_options' ) );
add_action( 'customize_register', array( $this, 'theme_specific_options' ) );
add_filter( 'customize_panel_active', array( $this, 'customize_panel_active' ), 10, 2 );
@@ -36,6 +37,25 @@ public function initialize( $is_tumblr3_active ): void {
}
}
+ public function enqueue_customizer_scripts(): void {
+ $deps = tumblr3_get_asset_meta( TUMBLR3_PATH . 'assets/js/build/customizer.asset.php' );
+
+ wp_enqueue_script(
+ 'tumblr3-customizer',
+ TUMBLR3_URL . 'assets/js/build/customizer.js',
+ $deps['dependencies'],
+ $deps['version'],
+ true
+ );
+
+ wp_enqueue_style(
+ 'tumblr3-customizer',
+ TUMBLR3_URL . 'assets/js/build/customizer.css',
+ array(),
+ $deps['version']
+ );
+ }
+
/**
* Add Tumblr theme HTML options.
*
@@ -48,8 +68,14 @@ public function tumblr_html_options( $wp_customize ): void {
$wp_customize->add_section(
'tumblr3_html',
array(
- 'title' => __( 'Tumblr Theme HTML', 'tumblr3' ),
- 'priority' => 30,
+ 'title' => __( 'Tumblr Theme HTML', 'tumblr3' ),
+ 'priority' => 30,
+ 'description' => sprintf(
+ '%s
%s', + __( 'Want to create a custom look for your blog? Read:', 'tumblr3' ), + __( 'Tumblr Theme Documentation', 'tumblr3' ) + ), + 'description_hidden' => true, ) ); @@ -68,15 +94,29 @@ public function tumblr_html_options( $wp_customize ): void { ) ); - $wp_customize->add_control( + /** + * @see https://github.com/WordPress/WordPress/blob/master/wp-includes/customize/class-wp-customize-code-editor-control.php + */ + $editor = new \WP_Customize_Code_Editor_Control( + $wp_customize, 'tumblr3_theme_html', array( - 'label' => __( 'HTML', 'tumblr3' ), + 'label' => '', 'section' => 'tumblr3_html', - 'type' => 'textarea', 'priority' => 10, ) ); + + $editor->code_type = 'text/html'; + $editor->editor_settings = array( + 'codemirror' => array( + 'indentUnit' => 2, + 'tabSize' => 2, + 'lint' => false, + ), + ); + + $wp_customize->add_control( $editor ); } /** @@ -317,7 +357,7 @@ public function theme_specific_options( $wp_customize ): void { $wp_customize->add_section( 'tumblr3_select', array( - 'title' => __( 'Theme Select Options', 'tumblr3' ), + 'title' => __( 'Tumblr Theme Select Options', 'tumblr3' ), 'priority' => 30, ) ); @@ -326,7 +366,7 @@ public function theme_specific_options( $wp_customize ): void { $wp_customize->add_section( 'tumblr3_text', array( - 'title' => __( 'Theme Text Options', 'tumblr3' ), + 'title' => __( 'Tumblr Theme Text Options', 'tumblr3' ), 'priority' => 30, ) ); @@ -335,7 +375,7 @@ public function theme_specific_options( $wp_customize ): void { $wp_customize->add_section( 'tumblr3_font', array( - 'title' => __( 'Theme Font Options', 'tumblr3' ), + 'title' => __( 'Tumblr Theme Font Options', 'tumblr3' ), 'priority' => 30, ) ); @@ -344,7 +384,7 @@ public function theme_specific_options( $wp_customize ): void { $wp_customize->add_section( 'tumblr3_boolean', array( - 'title' => __( 'Theme Boolean Options', 'tumblr3' ), + 'title' => __( 'Tumblr Theme Checkbox Options', 'tumblr3' ), 'priority' => 30, ) ); @@ -353,7 +393,7 @@ public function theme_specific_options( $wp_customize ): void { $wp_customize->add_section( 'tumblr3_image', array( - 'title' => __( 'Theme Image Options', 'tumblr3' ), + 'title' => __( 'Tumblr Theme Image Options', 'tumblr3' ), 'priority' => 30, ) ); diff --git a/src/Plugin.php b/src/Plugin.php index 22866f2..fa67789 100644 --- a/src/Plugin.php +++ b/src/Plugin.php @@ -67,6 +67,16 @@ class Plugin { */ public ?Parser $parser = null; + /** + * The block extensions component. + * + * @since 1.0.0 + * @version 1.0.0 + * + * @var BlockExtensions|null + */ + public ?BlockExtensions $block_extensions = null; + /** * Plugin constructor. * @@ -141,6 +151,9 @@ public function initialize(): void { $this->theme_garden = new ThemeGarden(); $this->theme_garden->initialize(); + $this->block_extensions = new BlockExtensions(); + $this->block_extensions->initialize( $this->tumblr3_active ); + // In the frontend, setup the parser. if ( ! is_admin() ) { $this->parser = new Parser(); diff --git a/src/ThemeGarden.php b/src/ThemeGarden.php index 6c588a7..48f097e 100644 --- a/src/ThemeGarden.php +++ b/src/ThemeGarden.php @@ -16,18 +16,27 @@ */ class ThemeGarden { const THEME_GARDEN_ENDPOINT = 'https://www.tumblr.com/api/v2/theme_garden'; + const ADMIN_MENU_SLUG = 'tumblr-themes'; /** - * This holds the currently selected category of themes. + * The `category` param in the current URL. If present, we'll search Tumblr's API for the given category. + * Defaults to featured if no param is present. * - * @var string + * @var string $selected_category */ public string $selected_category = 'featured'; /** - * This holds the current search query. + * The `theme` param in the current URL. If present, we'll render a theme details overlay. * - * @var string + * @var string $selected_theme_id + */ + public string $selected_theme_id = ''; + + /** + * The `search` param in the current URL. If present, we'll search Tumblr's API for the given query. + * + * @var string $search */ public string $search = ''; @@ -57,6 +66,9 @@ public function initialize(): void { // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Nonce is verified in maybe_activate_theme. $this->search = ( isset( $_GET['search'] ) ) ? sanitize_text_field( wp_unslash( $_GET['search'] ) ) : ''; + + // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Nonce is verified in maybe_activate_theme. + $this->selected_theme_id = ( isset( $_GET['theme'] ) ) ? sanitize_text_field( wp_unslash( $_GET['theme'] ) ) : ''; } /** @@ -67,10 +79,11 @@ public function initialize(): void { * @return void */ public function enqueue_assets( string $hook ): void { - if ( 'appearance_page_tumblr-themes' === $hook ) { + if ( 'appearance_page_' . self::ADMIN_MENU_SLUG === $hook ) { $deps = tumblr3_get_asset_meta( TUMBLR3_PATH . 'assets/js/build/theme-garden.asset.php' ); $this->enqueue_admin_styles( $deps['version'] ); $themes_and_categories = $this->get_themes_and_categories(); + $theme_details = $this->selected_theme_id ? $this->get_theme($this->selected_theme_id) : null; wp_enqueue_script( 'tumblr-theme-garden', TUMBLR3_URL . 'assets/js/build/theme-garden.js', @@ -88,6 +101,8 @@ public function enqueue_assets( string $hook ): void { 'selectedCategory' => $this->selected_category, 'search' => $this->search, 'baseUrl' => admin_url( 'admin.php?page=tumblr-themes' ), + 'selectedThemeId' => $this->selected_theme_id, + 'themeDetails' => $theme_details, ) ), 'before' @@ -108,7 +123,7 @@ public function enqueue_assets( string $hook ): void { 'tumblr-theme-install', 'const T3_Install = ' . wp_json_encode( array( - 'browseUrl' => admin_url( 'admin.php?page=tumblr-themes' ), + 'browseUrl' => admin_url( 'admin.php?page=' . self::ADMIN_MENU_SLUG ), 'buttonText' => __( 'Browse Tumblr themes', 'tumblr3' ), ) ), @@ -142,6 +157,30 @@ public function enqueue_admin_styles( $version ): void { ); } + /** + * Fetches and theme object from Tumblr's API. + * + * @param string $theme_id The theme id to send to Tumblr's API. + * + * @return \WP_Error | object + */ + public function get_theme( string $theme_id ) { + $response = wp_remote_get( self::THEME_GARDEN_ENDPOINT . '/theme/' . esc_attr( $theme_id ) . '?time=' . time() ); + $status = wp_remote_retrieve_response_code( $response ); + + if ( 200 !== $status ) { + return new \WP_Error(); + } + + $body = json_decode( wp_remote_retrieve_body( $response ) ); + + if ( ! isset( $body->response->theme ) ) { + return new \WP_Error(); + } + + return $body->response; + } + /** * Register REST routes. * @@ -153,7 +192,19 @@ public function register_rest_routes(): void { '/themes', array( 'methods' => 'GET', - 'callback' => array( $this, 'get_themes' ), + 'callback' => array( $this, 'rest_api_get_themes' ), + 'permission_callback' => function () { + return current_user_can( 'manage_options' ); + }, + ) + ); + + register_rest_route( + 'tumblr3/v1', + '/theme', + array( + 'methods' => 'GET', + 'callback' => array( $this, 'rest_api_get_theme' ), 'permission_callback' => function () { return current_user_can( 'manage_options' ); }, @@ -166,11 +217,21 @@ public function register_rest_routes(): void { * * @return \WP_REST_Response The settings for the queue. */ - public function get_themes(): \WP_REST_Response { + public function rest_api_get_themes(): \WP_REST_Response { $themes_and_categories = $this->get_themes_and_categories(); return new \WP_REST_Response( $themes_and_categories['themes'], 200 ); } + /** + * Gets theme details for an ajax request. + * + * @return \WP_REST_Response The settings for the queue. + */ + public function rest_api_get_theme(): \WP_REST_Response { + $theme = $this->get_theme( $this->selected_theme_id ); + return new \WP_REST_Response( $theme, 200 ); + } + /** * Checks URL query for a tumblr theme id to activate. * @@ -181,45 +242,29 @@ public function maybe_activate_theme(): void { return; } - $theme_id = isset( $_GET['activate_tumblr_theme'] ) ? absint( wp_unslash( $_GET['activate_tumblr_theme'] ) ) : 0; - - // Returns early if theme id was not set. - if ( 0 === $theme_id ) { - return; - } - - // During development, we don't want to be so limited by cache. So we'll send a cache invalidator to every request. - // TODO: remove once we are confident that api response will be stable. - $response = wp_remote_get( self::THEME_GARDEN_ENDPOINT . '/theme/' . esc_attr( $theme_id ) . '?time=' . time() ); - $status = wp_remote_retrieve_response_code( $response ); + $theme_id_to_activate = sanitize_text_field( wp_unslash( $_GET['activate_tumblr_theme'] ) ); + $theme = $this->get_theme( $theme_id_to_activate ); - if ( 200 !== $status ) { + if ( is_wp_error( $theme ) ) { return; } - - $body = json_decode( wp_remote_retrieve_body( $response ) ); - - if ( ! isset( $body->response->theme ) ) { - return; - } - // Save theme details to options. - update_option( 'tumblr3_theme_html', $body->response->theme ); + update_option( 'tumblr3_theme_html', $theme->theme ); // Save all external theme details to an option. $external_theme_details = array( - 'id' => $theme_id, - 'title' => isset( $body->response->title ) ? $body->response->title : '', - 'thumbnail' => isset( $body->response->thumbnail ) ? $body->response->thumbnail : '', - 'author_name' => isset( $body->response->author->name ) ? $body->response->author->name : '', - 'author_url' => isset( $body->response->author->url ) ? $body->response->author->url : '', + 'id' => $theme_id_to_activate, + 'title' => isset( $theme->title ) ? $theme->title : '', + 'thumbnail' => isset( $theme->thumbnail ) ? $theme->thumbnail : '', + 'author_name' => isset( $theme->author->name) ? $theme->author->name : '', + 'author_url' => isset( $theme->author->url ) ? $theme->author->url : '', ); update_option( 'tumblr3_external_theme', $external_theme_details ); update_option( 'tumblr3_use_theme', '1' ); // Setup theme option defaults. - $this->option_defaults_helper( maybe_unserialize( $body->response->default_params ) ); + $this->option_defaults_helper( maybe_unserialize( $theme->default_params ) ); // Finally, redirect to the customizer with the new theme active. wp_safe_redirect( wp_customize_url() );
- { themes.map( theme => (
-
-
-
-
+
+ );
+ } ) }
);
};
@@ -62,5 +89,10 @@ export const ThemeGardenList = compose(
withSelect( select => ( {
themes: select( 'tumblr3/theme-garden-store' ).getThemes(),
isFetchingThemes: select( 'tumblr3/theme-garden-store' ).getIsFetchingThemes(),
+ } ) ),
+ withDispatch( dispatch => ( {
+ closeOverlay: () => {
+ return dispatch( 'tumblr3/theme-garden-store' ).closeOverlay();
+ },
} ) )
)( _ThemeGardenList );
diff --git a/assets/js/src/components/theme-garden-no-themes.js b/assets/js/src/components/theme-garden-no-themes.js
index f17b92a..a520391 100644
--- a/assets/js/src/components/theme-garden-no-themes.js
+++ b/assets/js/src/components/theme-garden-no-themes.js
@@ -3,7 +3,7 @@ import { _x } from '@wordpress/i18n';
/**
* These playful messages were written by Tumblr staff.
*
- * Class names reference built-in wp-admin styles, and styles declared in _theme_garden.scss.
+ * CSS classNames reference built-in wp-admin styles, and styles declared in _theme_garden.scss.
*/
export const ThemeGardenNoThemes = () => {
const playfulNoThemesText = [
diff --git a/assets/js/src/components/theme-garden-overlay.js b/assets/js/src/components/theme-garden-overlay.js
new file mode 100644
index 0000000..78eb7fb
--- /dev/null
+++ b/assets/js/src/components/theme-garden-overlay.js
@@ -0,0 +1,152 @@
+import { useCallback } from '@wordpress/element';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { _x } from '@wordpress/i18n';
+import classNames from 'classnames';
+
+/**
+ * Displays an overlay with details about a Tumblr theme.
+ *
+ * CSS classNames reference built-in wp-admin styles, and styles declared in _theme_garden.scss.
+ *
+ * @param {Object} props
+ * @param {Array} props.themes
+ * @param {boolean} props.isOverlayOpen
+ * @param {boolean} props.isFetchingTheme
+ * @param {Function} props.closeOverlay
+ * @param {Object} props.themeDetails
+ * @param {Function} props.fetchThemeById
+ */
+const _ThemeGardenOverlay = ( {
+ themes,
+ isOverlayOpen,
+ isFetchingTheme,
+ closeOverlay,
+ themeDetails,
+ fetchThemeById,
+} ) => {
+ const handleCloseClick = useCallback( () => {
+ const currentUrl = new URL( window.location.href );
+ const params = new URLSearchParams( currentUrl.search );
+ params.delete( 'theme' );
+ currentUrl.search = params.toString();
+ window.history.pushState( {}, '', currentUrl.toString() );
+ closeOverlay();
+ }, [ closeOverlay ] );
+
+ const renderThemeDetails = useCallback( () => {
+ if ( isFetchingTheme || ! themeDetails ) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+ );
+ }, [ themeDetails, isFetchingTheme ] );
+
+ const onClickNavigate = useCallback(
+ async nextIndex => {
+ const currentUrl = new URL( window.location.href );
+ const params = new URLSearchParams( currentUrl.search );
+ const nextId = themes[ nextIndex ].id;
+ params.delete( 'theme' );
+ params.append( 'theme', nextId );
+ currentUrl.search = params.toString();
+ await fetchThemeById( nextId );
+ window.history.pushState( {}, '', currentUrl.toString() );
+ },
+ [ themes, fetchThemeById ]
+ );
+
+ const renderThemeHeader = useCallback( () => {
+ const currentIndex = themes.findIndex( theme => theme.id === themeDetails.id );
+ const prevButtonDisabled = currentIndex === -1 || currentIndex === 0;
+ const nextButtonDisabled = currentIndex === -1 || currentIndex === themes.length - 1;
+
+ return (
+
+
+
+ 
+
+
+
+ { themeDetails.title }
+ +
+
+
+
+
+ );
+ }, [ themeDetails, themes, onClickNavigate, handleCloseClick ] );
+
+ if ( ! isOverlayOpen || ! themeDetails ) {
+ return null;
+ }
+
+ return (
+
+
+
+ );
+};
+
+export const ThemeGardenOverlay = compose(
+ withSelect( select => ( {
+ themes: select( 'tumblr3/theme-garden-store' ).getThemes(),
+ isOverlayOpen: select( 'tumblr3/theme-garden-store' ).getIsOverlayOpen(),
+ isFetchingTheme: select( 'tumblr3/theme-garden-store' ).getIsFetchingTheme(),
+ themeDetails: select( 'tumblr3/theme-garden-store' ).getThemeDetails(),
+ } ) ),
+ withDispatch( dispatch => ( {
+ closeOverlay: () => {
+ return dispatch( 'tumblr3/theme-garden-store' ).closeOverlay();
+ },
+ } ) )
+)( _ThemeGardenOverlay );
diff --git a/assets/js/src/components/theme-garden-store.js b/assets/js/src/components/theme-garden-store.js
index 373235c..1ab58c1 100644
--- a/assets/js/src/components/theme-garden-store.js
+++ b/assets/js/src/components/theme-garden-store.js
@@ -4,74 +4,132 @@ import { createReduxStore, register } from '@wordpress/data';
/**
* Default state is loaded from an inline script declared in ThemeGarden.php.
*/
-
-/*ignore jslint start*/
const DEFAULT_STATE = {
+ // The following properties are static and will not change.
logoUrl: themeGardenData.logoUrl, // eslint-disable-line no-undef
- themes: themeGardenData.themes, // eslint-disable-line no-undef
categories: themeGardenData.categories, // eslint-disable-line no-undef
+ baseUrl: themeGardenData.baseUrl, // eslint-disable-line no-undef
+
+ // The following properties will change during usage of the app.
+ themes: themeGardenData.themes, // eslint-disable-line no-undef
selectedCategory: themeGardenData.selectedCategory, // eslint-disable-line no-undef
search: themeGardenData.search, // eslint-disable-line no-undef
- baseUrl: themeGardenData.baseUrl, // eslint-disable-line no-undef
+ selectedThemeId: themeGardenData.selectedThemeId, // eslint-disable-line no-undef
+ themeDetails: themeGardenData.themeDetails, // eslint-disable-line no-undef
isFetchingThemes: false,
+ isOverlayOpen: !! themeGardenData.selectedThemeId, // eslint-disable-line no-undef
+ isFetchingTheme: false,
};
-/*ignore jslint end*/
const reducer = ( state = DEFAULT_STATE, action ) => {
switch ( action.type ) {
- case 'PREFETCH_THEMES':
+ case 'BEFORE_FETCH_THEMES':
return { ...state, isFetchingThemes: true };
+ case 'BEFORE_FETCH_THEME':
+ return { ...state, isFetchingTheme: true, isOverlayOpen: true };
case 'RECEIVE_THEMES':
- return { ...state, themes: action.themes, isFetchingThemes: false };
+ return {
+ ...state,
+ themes: action.themes,
+ isFetchingThemes: false,
+ selectedCategory: action.category,
+ search: action.search,
+ };
+ case 'RECEIVE_THEME':
+ return {
+ ...state,
+ isFetchingTheme: false,
+ themeDetails: action.theme,
+ selectedThemeId: action.id,
+ };
+ case 'CLOSE_OVERLAY':
+ return { ...state, isOverlayOpen: false, isFetchingTheme: false, themeDetails: null };
default:
return state;
}
};
const actions = {
- receiveThemes( themes ) {
+ closeOverlay() {
+ return {
+ type: 'CLOSE_OVERLAY',
+ };
+ },
+ receiveTheme( theme, id ) {
+ return {
+ type: 'RECEIVE_THEME',
+ theme,
+ id,
+ };
+ },
+ receiveThemes( themes, category, search ) {
return {
type: 'RECEIVE_THEMES',
themes,
+ category,
+ search,
};
},
- prefetchThemes() {
- return { type: 'PREFETCH_THEMES' };
+ beforeFetchTheme() {
+ return { type: 'BEFORE_FETCH_THEME' };
+ },
+ beforeFetchThemes() {
+ return { type: 'BEFORE_FETCH_THEMES' };
},
*fetchThemes( category ) {
try {
return controls.FETCH_THEMES( category );
} catch ( error ) {
- throw new Error( 'Failed to update settings' );
+ throw new Error( 'Failed to fetch themes' );
}
},
*searchThemes( query ) {
try {
return controls.SEARCH_THEMES( query );
} catch ( error ) {
- throw new Error( 'Failed to update settings' );
+ throw new Error( 'Failed to search themes' );
+ }
+ },
+ *fetchTheme( id ) {
+ try {
+ return controls.FETCH_THEME( id );
+ } catch ( error ) {
+ throw new Error( 'Failed to fetch theme' );
}
},
};
const selectors = {
+ getBaseUrl() {
+ return DEFAULT_STATE.baseUrl;
+ },
+ getCategories() {
+ return DEFAULT_STATE.categories;
+ },
getLogoUrl() {
return DEFAULT_STATE.logoUrl;
},
- getInitialFilterBarProps() {
- return {
- categories: DEFAULT_STATE.categories,
- selectedCategory: DEFAULT_STATE.selectedCategory,
- baseUrl: DEFAULT_STATE.baseUrl,
- search: DEFAULT_STATE.search,
- };
+ getSelectedCategory( state ) {
+ return state.selectedCategory;
+ },
+ getSearch( state ) {
+ return state.search;
},
getIsFetchingThemes( state ) {
return state.isFetchingThemes;
},
+ getIsFetchingTheme( state ) {
+ return state.isFetchingTheme;
+ },
getThemes( state ) {
return state.themes;
},
+ getIsOverlayOpen( state ) {
+ return state.isOverlayOpen;
+ },
+ getThemeDetails( state ) {
+ return state.themeDetails;
+ },
};
const controls = {
@@ -100,16 +158,26 @@ const controls = {
throw error;
} );
},
+ FETCH_THEME( id ) {
+ return apiFetch( {
+ path: '/tumblr3/v1/theme?theme=' + id,
+ method: 'GET',
+ } )
+ .then( response => {
+ return response;
+ } )
+ .catch( error => {
+ console.error( 'API Error:', error ); // eslint-disable-line no-console
+ throw error;
+ } );
+ },
};
-const resolvers = {};
-
const store = createReduxStore( 'tumblr3/theme-garden-store', {
reducer,
actions,
selectors,
controls,
- resolvers,
} );
register( store );
diff --git a/assets/js/src/customizer.js b/assets/js/src/customizer.js
new file mode 100644
index 0000000..c64e1e0
--- /dev/null
+++ b/assets/js/src/customizer.js
@@ -0,0 +1,207 @@
+/* global _ */
+/* global jQuery */
+
+import './customizer.scss';
+
+window.wp = window.wp || {};
+window.wp.customize = window.wp.customize || {};
+
+( function ( window, document, $, wp ) {
+ 'use strict';
+
+ const app = {};
+ wp.customize.resizer = app;
+ let mouseLeft = 0;
+ let expanded = false;
+
+ app.cache = function () {
+ app.$ = {};
+ app.$.window = $( window );
+ app.$.body = $( document.body );
+ app.$.customizer = $( document.getElementById( 'customize-controls' ) );
+ app.$.overlay = $( '.wp-full-overlay.expanded' );
+ app.$.collapser = $( '.collapse-sidebar-label' );
+ };
+
+ app.init = function () {
+ app.cache();
+
+ app.$.customizer.append( '' );
+ app.$.resizer = $( '.customizer-resizer' );
+ app.checkWidth();
+
+ app.events();
+ };
+
+ app.events = function () {
+ // We need the iframe to bubble up mouse events
+ app.initIframeMouseEvents();
+
+ app.$.resizer.on( 'mousedown', app.resizerEngage );
+ app.$.collapser.on( 'click', app.snapToDefault );
+ $( window ).resize( _.debounce( app.checkWidth, 50 ) );
+ };
+
+ app.checkWidth = function () {
+ const winWidth = app.$.window.width();
+
+ // the breakpoint where mobile view is triggered.
+ if ( winWidth < 640 ) {
+ expanded = false;
+ app.$.body.removeClass( 'resizable' );
+ return app.snapToDefault();
+ }
+
+ if ( ! expanded ) {
+ app.$.body.addClass( 'resizable' );
+ expanded = true;
+ }
+ };
+
+ app.resizerEngage = function ( evt ) {
+ const winWidth = app.$.window.width();
+ const iframeWidth = winWidth - app.$.customizer.width();
+
+ evt.preventDefault();
+
+ if ( iframeWidth < 100 ) {
+ /*
+ Decrease customizer width below
+ threshold where it snaps to full-width
+ */
+ app.sizeCustomizer( winWidth - 320 );
+ app.fullWidth( 'no' );
+ } else {
+ // Disable customizer sizing animation
+ app.$.customizer.addClass( 'no-animation' );
+
+ // add event listeners for the dragging duration
+ $( document ).on( 'mousemove', app.resizerMovement );
+ $( document ).on( 'mouseup', app.resizerDisengage );
+ }
+ };
+
+ app.resizerMovement = function ( evt ) {
+ // Check if the customizer is expanding (vs shrinking)
+ const expanding = mouseLeft < evt.pageX;
+ // Re-cache mouseLeft
+ mouseLeft = evt.pageX;
+
+ const iframeWidth = app.$.window.width() - mouseLeft;
+
+ // If iframe width is less than a workable width, snap full-screen
+ if ( iframeWidth < 300 && iframeWidth > 100 ) {
+ app.snapToDefault();
+ app.resizerDisengage();
+
+ return app.fullWidth( 'yes' );
+ }
+
+ app.fullWidth( 'no' );
+
+ // If we're expanding larger than default, increae the width
+ if ( mouseLeft >= 320 || ( mouseLeft >= 300 && expanding ) ) {
+ return app.sizeCustomizer( mouseLeft );
+ }
+
+ // If we're condensing, and close to our default, snap to it
+ if ( ! expanding && mouseLeft > 270 && mouseLeft < 320 ) {
+ return app.snapToDefault();
+ }
+
+ // If we're condensing past our default, just trigger the collapse
+ if ( mouseLeft < 270 ) {
+ app.snapToDefault();
+ app.resizerDisengage();
+ app.$.collapser.trigger( 'click' );
+ }
+ };
+
+ app.resizerDisengage = function () {
+ // remove temp. event listeners
+ $( document ).off( 'mousemove', app.resizerMovement );
+ $( document ).off( 'mouseup', app.resizerDisengage );
+
+ // Re-enable customizer sizing animation
+ app.$.customizer.removeClass( 'no-animation' );
+ };
+
+ app.fullWidth = function ( makeFull ) {
+ const method = 'yes' === makeFull ? 'addClass' : 'removeClass';
+ app.$.body[ method ]( 'fullwidth-customizer' );
+ };
+
+ app.snapToDefault = function () {
+ app.sizeCustomizer();
+ };
+
+ app.sizeCustomizer = function ( size ) {
+ size = size || '';
+ // Overlay margin needs to be nudged (give more space)
+ app.$.overlay.css( { 'margin-left': size } );
+ // Move the resizer handle
+ app.$.resizer.css( { 'margin-left': size ? size - 5 : size } );
+ // And of course, resize the customizer
+ app.$.customizer.width( size );
+ };
+
+ app.initIframeMouseEvents = function () {
+ // Need to recursively check for existence of iframe
+ setTimeout( function () {
+ const $iframe = app.$.overlay.find( 'iframe' );
+
+ if ( $iframe.length ) {
+ // Setup iframe bubbling
+ app.bubbleMouseEvent( $iframe[ 0 ], 'mousemove' );
+ app.bubbleMouseEvent( $iframe[ 0 ], 'mouseup' );
+ } else {
+ app.initIframeMouseEvents();
+ }
+ }, 500 );
+ };
+
+ app.bubbleMouseEvent = function ( iframe, evtName ) {
+ const longName = 'on' + evtName;
+ // Save any previous handler
+ const existingMouseEvt = iframe.contentWindow[ longName ];
+
+ // Attach a new listener
+ iframe.contentWindow[ longName ] = function ( evt ) {
+ // Fire existing listener
+ if ( existingMouseEvt ) {
+ existingMouseEvt( evt );
+ }
+
+ // Create a new event for the this window
+ const newEvt = document.createEvent( 'MouseEvents' );
+
+ // We'll need this to offset the mouse appropriately
+ const boundingClientRect = iframe.getBoundingClientRect();
+
+ // Initialize the event, copying exiting event values
+ // for the most part
+ newEvt.initMouseEvent(
+ evtName,
+ true, // bubbles
+ false, // not cancelable
+ window,
+ evt.detail,
+ evt.screenX,
+ evt.screenY,
+ evt.clientX + boundingClientRect.left,
+ evt.clientY + boundingClientRect.top,
+ evt.ctrlKey,
+ evt.altKey,
+ evt.shiftKey,
+ evt.metaKey,
+ evt.button,
+ null // no related element
+ );
+
+ // Dispatch the event on the iframe element
+ iframe.dispatchEvent( newEvt );
+ };
+ };
+
+ wp.customize.bind( 'ready', app.init );
+} )( window, document, jQuery, window.wp );
diff --git a/assets/js/src/customizer.scss b/assets/js/src/customizer.scss
new file mode 100644
index 0000000..2f7e38d
--- /dev/null
+++ b/assets/js/src/customizer.scss
@@ -0,0 +1,140 @@
+.customize-control-code_editor .CodeMirror,
+.customize-control-code_editor textarea {
+ height: 100%;
+}
+
+.customizer-resizer {
+ display: none;
+}
+
+.wp-full-overlay-sidebar {
+ max-width: 100%;
+}
+
+.resizable {
+ .customizer-resizer {
+ content: '';
+ display: block;
+ height: 100%;
+ width: 4px;
+ position: absolute;
+ right: -4px;
+ margin-top: -30px;
+ cursor: pointer;
+ cursor: col-resize;
+ z-index: 9999999;
+ opacity: 0.8;
+ }
+
+ .wp-full-overlay-sidebar {
+ border-right-width: 4px;
+ }
+
+ .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
+ margin-left: -286px;
+ }
+
+ &.wp-core-ui .wp-full-overlay .collapse-sidebar {
+ left: 22px;
+ }
+}
+
+.no-animation {
+
+ .wp-full-overlay,
+ .wp-full-overlay-sidebar,
+ .wp-full-overlay .collapse-sidebar,
+ .wp-full-overlay-main {
+ -webkit-transition: none;
+ transition: none;
+ }
+}
+
+// Mimic @media screen and ( max-width: 640px ) styles when body has .fullwidth-customizer
+.fullwidth-customizer {
+ #customize-controls {
+ width: 100%;
+ }
+
+ .wp-full-overlay.expanded {
+ margin-left: 0;
+ }
+
+ .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
+ bottom: 0;
+ }
+
+ .customize-controls-preview-toggle {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 48px;
+ line-height: 45px;
+ font-size: 14px;
+ padding: 0 12px;
+ margin: 0;
+ height: 45px;
+ background: #eee;
+ border-right: 1px solid #ddd;
+ color: #444;
+ cursor: pointer;
+ -webkit-transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
+ transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
+ }
+
+ #customize-footer-actions,
+ #customize-preview,
+ .customize-controls-preview-toggle .controls,
+ .preview-only .wp-full-overlay-sidebar-content,
+ .preview-only .customize-controls-preview-toggle .preview {
+ display: none;
+ }
+
+ .customize-controls-preview-toggle {
+
+ .preview:before,
+ .controls:before {
+ font: normal 20px/1 dashicons;
+ content: "\f177";
+ position: relative;
+ top: 4px;
+ margin-right: 6px;
+ }
+
+ .controls:before {
+ content: "\f540";
+ }
+ }
+
+ .preview-only {
+ #customize-controls {
+ height: 45px;
+ }
+
+ #customize-preview,
+ .customize-controls-preview-toggle .controls {
+ display: block;
+ }
+ }
+
+ #customize-preview {
+ top: 45px;
+ bottom: 0;
+ height: auto;
+ }
+
+ &.wp-core-ui.wp-customizer {
+ .button {
+ padding: 6px 14px;
+ line-height: normal;
+ font-size: 14px;
+ vertical-align: middle;
+ height: auto;
+ margin-bottom: 4px;
+ }
+
+ #customize-header-actions .button-primary {
+ margin-top: 6px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/assets/js/src/theme-garden.js b/assets/js/src/theme-garden.js
index c73ec51..8654fce 100644
--- a/assets/js/src/theme-garden.js
+++ b/assets/js/src/theme-garden.js
@@ -1,30 +1,127 @@
-import { createRoot } from '@wordpress/element';
+import { createRoot, useEffect, useCallback } from '@wordpress/element';
import { ThemeGardenFilterBar } from './components/theme-garden-filterbar';
import { ThemeGardenList } from './components/theme-garden-list';
import { __ } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
+import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import './components/theme-garden-store';
+import { ThemeGardenOverlay } from './components/theme-garden-overlay';
/**
* ThemeGarden Component
*
* This component provides a user interface for browsing themes from Tumblr's theme garden.
*
- * Class names reference built-in wp-admin styles, and styles declared in _theme_garden.scss.
+ * CSS classNames reference built-in wp-admin styles, and styles declared in _theme_garden.scss.
*
- * @param {Object} props
- * @param {string} props.logoUrl
+ * @param {Object} props
+ * @param {string} props.logoUrl
+ * @param {Function} props.beforeFetchThemes
+ * @param {Function} props.fetchThemes
+ * @param {Function} props.receiveThemes
+ * @param {Function} props.searchThemes
+ * @param {Function} props.beforeFetchTheme
+ * @param {Function} props.fetchTheme
+ * @param {Function} props.receiveTheme
+ * @param {Function} props.closeOverlay
+ * @param {string} props.selectedCategory
+ * @param {string} props.search
*/
-const ThemeGarden = ( { logoUrl } ) => {
+const ThemeGarden = ( {
+ logoUrl,
+ beforeFetchThemes,
+ fetchThemes,
+ receiveThemes,
+ searchThemes,
+ beforeFetchTheme,
+ fetchTheme,
+ receiveTheme,
+ closeOverlay,
+ search,
+ selectedCategory,
+} ) => {
+ const fetchThemesByCategory = useCallback(
+ async category => {
+ beforeFetchThemes();
+ const response = await fetchThemes( category );
+ receiveThemes( response, category, '' );
+ },
+ [ beforeFetchThemes, receiveThemes, fetchThemes ]
+ );
+
+ const fetchThemesByQuery = useCallback(
+ async newSearch => {
+ beforeFetchThemes();
+ const response = await searchThemes( newSearch );
+ receiveThemes( response, '', newSearch );
+ },
+ [ beforeFetchThemes, receiveThemes, searchThemes ]
+ );
+ /**
+ * After backwards or forwards navigation, check URL search params for indicators that we have to re-fetch themes.
+ *
+ * @return {Promise
+ { renderThemeHeader() }
+ { renderThemeDetails() }
+
+
{ __( 'Tumblr Themes', 'tumblr3' ) }
- %s', + __( 'Want to create a custom look for your blog? Read:', 'tumblr3' ), + __( 'Tumblr Theme Documentation', 'tumblr3' ) + ), + 'description_hidden' => true, ) ); @@ -68,15 +94,29 @@ public function tumblr_html_options( $wp_customize ): void { ) ); - $wp_customize->add_control( + /** + * @see https://github.com/WordPress/WordPress/blob/master/wp-includes/customize/class-wp-customize-code-editor-control.php + */ + $editor = new \WP_Customize_Code_Editor_Control( + $wp_customize, 'tumblr3_theme_html', array( - 'label' => __( 'HTML', 'tumblr3' ), + 'label' => '', 'section' => 'tumblr3_html', - 'type' => 'textarea', 'priority' => 10, ) ); + + $editor->code_type = 'text/html'; + $editor->editor_settings = array( + 'codemirror' => array( + 'indentUnit' => 2, + 'tabSize' => 2, + 'lint' => false, + ), + ); + + $wp_customize->add_control( $editor ); } /** @@ -317,7 +357,7 @@ public function theme_specific_options( $wp_customize ): void { $wp_customize->add_section( 'tumblr3_select', array( - 'title' => __( 'Theme Select Options', 'tumblr3' ), + 'title' => __( 'Tumblr Theme Select Options', 'tumblr3' ), 'priority' => 30, ) ); @@ -326,7 +366,7 @@ public function theme_specific_options( $wp_customize ): void { $wp_customize->add_section( 'tumblr3_text', array( - 'title' => __( 'Theme Text Options', 'tumblr3' ), + 'title' => __( 'Tumblr Theme Text Options', 'tumblr3' ), 'priority' => 30, ) ); @@ -335,7 +375,7 @@ public function theme_specific_options( $wp_customize ): void { $wp_customize->add_section( 'tumblr3_font', array( - 'title' => __( 'Theme Font Options', 'tumblr3' ), + 'title' => __( 'Tumblr Theme Font Options', 'tumblr3' ), 'priority' => 30, ) ); @@ -344,7 +384,7 @@ public function theme_specific_options( $wp_customize ): void { $wp_customize->add_section( 'tumblr3_boolean', array( - 'title' => __( 'Theme Boolean Options', 'tumblr3' ), + 'title' => __( 'Tumblr Theme Checkbox Options', 'tumblr3' ), 'priority' => 30, ) ); @@ -353,7 +393,7 @@ public function theme_specific_options( $wp_customize ): void { $wp_customize->add_section( 'tumblr3_image', array( - 'title' => __( 'Theme Image Options', 'tumblr3' ), + 'title' => __( 'Tumblr Theme Image Options', 'tumblr3' ), 'priority' => 30, ) ); diff --git a/src/Plugin.php b/src/Plugin.php index 22866f2..fa67789 100644 --- a/src/Plugin.php +++ b/src/Plugin.php @@ -67,6 +67,16 @@ class Plugin { */ public ?Parser $parser = null; + /** + * The block extensions component. + * + * @since 1.0.0 + * @version 1.0.0 + * + * @var BlockExtensions|null + */ + public ?BlockExtensions $block_extensions = null; + /** * Plugin constructor. * @@ -141,6 +151,9 @@ public function initialize(): void { $this->theme_garden = new ThemeGarden(); $this->theme_garden->initialize(); + $this->block_extensions = new BlockExtensions(); + $this->block_extensions->initialize( $this->tumblr3_active ); + // In the frontend, setup the parser. if ( ! is_admin() ) { $this->parser = new Parser(); diff --git a/src/ThemeGarden.php b/src/ThemeGarden.php index 6c588a7..48f097e 100644 --- a/src/ThemeGarden.php +++ b/src/ThemeGarden.php @@ -16,18 +16,27 @@ */ class ThemeGarden { const THEME_GARDEN_ENDPOINT = 'https://www.tumblr.com/api/v2/theme_garden'; + const ADMIN_MENU_SLUG = 'tumblr-themes'; /** - * This holds the currently selected category of themes. + * The `category` param in the current URL. If present, we'll search Tumblr's API for the given category. + * Defaults to featured if no param is present. * - * @var string + * @var string $selected_category */ public string $selected_category = 'featured'; /** - * This holds the current search query. + * The `theme` param in the current URL. If present, we'll render a theme details overlay. * - * @var string + * @var string $selected_theme_id + */ + public string $selected_theme_id = ''; + + /** + * The `search` param in the current URL. If present, we'll search Tumblr's API for the given query. + * + * @var string $search */ public string $search = ''; @@ -57,6 +66,9 @@ public function initialize(): void { // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Nonce is verified in maybe_activate_theme. $this->search = ( isset( $_GET['search'] ) ) ? sanitize_text_field( wp_unslash( $_GET['search'] ) ) : ''; + + // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Nonce is verified in maybe_activate_theme. + $this->selected_theme_id = ( isset( $_GET['theme'] ) ) ? sanitize_text_field( wp_unslash( $_GET['theme'] ) ) : ''; } /** @@ -67,10 +79,11 @@ public function initialize(): void { * @return void */ public function enqueue_assets( string $hook ): void { - if ( 'appearance_page_tumblr-themes' === $hook ) { + if ( 'appearance_page_' . self::ADMIN_MENU_SLUG === $hook ) { $deps = tumblr3_get_asset_meta( TUMBLR3_PATH . 'assets/js/build/theme-garden.asset.php' ); $this->enqueue_admin_styles( $deps['version'] ); $themes_and_categories = $this->get_themes_and_categories(); + $theme_details = $this->selected_theme_id ? $this->get_theme($this->selected_theme_id) : null; wp_enqueue_script( 'tumblr-theme-garden', TUMBLR3_URL . 'assets/js/build/theme-garden.js', @@ -88,6 +101,8 @@ public function enqueue_assets( string $hook ): void { 'selectedCategory' => $this->selected_category, 'search' => $this->search, 'baseUrl' => admin_url( 'admin.php?page=tumblr-themes' ), + 'selectedThemeId' => $this->selected_theme_id, + 'themeDetails' => $theme_details, ) ), 'before' @@ -108,7 +123,7 @@ public function enqueue_assets( string $hook ): void { 'tumblr-theme-install', 'const T3_Install = ' . wp_json_encode( array( - 'browseUrl' => admin_url( 'admin.php?page=tumblr-themes' ), + 'browseUrl' => admin_url( 'admin.php?page=' . self::ADMIN_MENU_SLUG ), 'buttonText' => __( 'Browse Tumblr themes', 'tumblr3' ), ) ), @@ -142,6 +157,30 @@ public function enqueue_admin_styles( $version ): void { ); } + /** + * Fetches and theme object from Tumblr's API. + * + * @param string $theme_id The theme id to send to Tumblr's API. + * + * @return \WP_Error | object + */ + public function get_theme( string $theme_id ) { + $response = wp_remote_get( self::THEME_GARDEN_ENDPOINT . '/theme/' . esc_attr( $theme_id ) . '?time=' . time() ); + $status = wp_remote_retrieve_response_code( $response ); + + if ( 200 !== $status ) { + return new \WP_Error(); + } + + $body = json_decode( wp_remote_retrieve_body( $response ) ); + + if ( ! isset( $body->response->theme ) ) { + return new \WP_Error(); + } + + return $body->response; + } + /** * Register REST routes. * @@ -153,7 +192,19 @@ public function register_rest_routes(): void { '/themes', array( 'methods' => 'GET', - 'callback' => array( $this, 'get_themes' ), + 'callback' => array( $this, 'rest_api_get_themes' ), + 'permission_callback' => function () { + return current_user_can( 'manage_options' ); + }, + ) + ); + + register_rest_route( + 'tumblr3/v1', + '/theme', + array( + 'methods' => 'GET', + 'callback' => array( $this, 'rest_api_get_theme' ), 'permission_callback' => function () { return current_user_can( 'manage_options' ); }, @@ -166,11 +217,21 @@ public function register_rest_routes(): void { * * @return \WP_REST_Response The settings for the queue. */ - public function get_themes(): \WP_REST_Response { + public function rest_api_get_themes(): \WP_REST_Response { $themes_and_categories = $this->get_themes_and_categories(); return new \WP_REST_Response( $themes_and_categories['themes'], 200 ); } + /** + * Gets theme details for an ajax request. + * + * @return \WP_REST_Response The settings for the queue. + */ + public function rest_api_get_theme(): \WP_REST_Response { + $theme = $this->get_theme( $this->selected_theme_id ); + return new \WP_REST_Response( $theme, 200 ); + } + /** * Checks URL query for a tumblr theme id to activate. * @@ -181,45 +242,29 @@ public function maybe_activate_theme(): void { return; } - $theme_id = isset( $_GET['activate_tumblr_theme'] ) ? absint( wp_unslash( $_GET['activate_tumblr_theme'] ) ) : 0; - - // Returns early if theme id was not set. - if ( 0 === $theme_id ) { - return; - } - - // During development, we don't want to be so limited by cache. So we'll send a cache invalidator to every request. - // TODO: remove once we are confident that api response will be stable. - $response = wp_remote_get( self::THEME_GARDEN_ENDPOINT . '/theme/' . esc_attr( $theme_id ) . '?time=' . time() ); - $status = wp_remote_retrieve_response_code( $response ); + $theme_id_to_activate = sanitize_text_field( wp_unslash( $_GET['activate_tumblr_theme'] ) ); + $theme = $this->get_theme( $theme_id_to_activate ); - if ( 200 !== $status ) { + if ( is_wp_error( $theme ) ) { return; } - - $body = json_decode( wp_remote_retrieve_body( $response ) ); - - if ( ! isset( $body->response->theme ) ) { - return; - } - // Save theme details to options. - update_option( 'tumblr3_theme_html', $body->response->theme ); + update_option( 'tumblr3_theme_html', $theme->theme ); // Save all external theme details to an option. $external_theme_details = array( - 'id' => $theme_id, - 'title' => isset( $body->response->title ) ? $body->response->title : '', - 'thumbnail' => isset( $body->response->thumbnail ) ? $body->response->thumbnail : '', - 'author_name' => isset( $body->response->author->name ) ? $body->response->author->name : '', - 'author_url' => isset( $body->response->author->url ) ? $body->response->author->url : '', + 'id' => $theme_id_to_activate, + 'title' => isset( $theme->title ) ? $theme->title : '', + 'thumbnail' => isset( $theme->thumbnail ) ? $theme->thumbnail : '', + 'author_name' => isset( $theme->author->name) ? $theme->author->name : '', + 'author_url' => isset( $theme->author->url ) ? $theme->author->url : '', ); update_option( 'tumblr3_external_theme', $external_theme_details ); update_option( 'tumblr3_use_theme', '1' ); // Setup theme option defaults. - $this->option_defaults_helper( maybe_unserialize( $body->response->default_params ) ); + $this->option_defaults_helper( maybe_unserialize( $theme->default_params ) ); // Finally, redirect to the customizer with the new theme active. wp_safe_redirect( wp_customize_url() );