Add theme json inspector (#520)

* deps: add codemirror dependencies

* add user theme data endpoint

* Add code mirror editor for theme json data

* Moved json editor stuff to a modal class and started a resolvers file for API handling

* add theme name to editor modal title

* refactor fetchThemeJson

* reword from editor to inspector

* reword

* Update src/plugin-sidebar.js

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

* Update src/editor-sidebar/json-editor-modal.js

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

---------

Co-authored-by: Jason Crist <jcrist@pbking.com>
Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

admin/resolver_additions.php

@@ -95,7 +95,6 @@ public static function export_theme_data( $content, $extra_theme_data = null ) {
 			$data['$schema'] = $schema;
 			$theme_json      = wp_json_encode( $data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE );
 			return preg_replace( '~(?:^|\G)\h{4}~m', "\t", $theme_json );
-
 		}
 
 		public static function get_theme_file_contents() {
@@ -128,7 +127,6 @@ public static function clean_cached_data() {
 			// Does this clear the Gutenberg equivalent?
 			static::$theme_json_file_cache = array();
 		}
-
 	}
 }
 

includes/class-create-block-theme-api.php

@@ -130,6 +130,37 @@ public function register_rest_routes() {
 				},
 			)
 		);
+		register_rest_route(
+			'create-block-theme/v1',
+			'/get-theme-data',
+			array(
+				'methods'             => 'GET',
+				'callback'            => array( $this, 'rest_get_theme_data' ),
+				'permission_callback' => function () {
+					return current_user_can( 'edit_theme_options' );
+				},
+			),
+		);
+	}
+
+	function rest_get_theme_data( $request ) {
+		try {
+			$theme_data = MY_Theme_JSON_Resolver::get_theme_file_contents();
+			return new WP_REST_Response(
+				array(
+					'status'  => 'SUCCESS',
+					'message' => __( 'Theme data retrieved.', 'create-block-theme' ),
+					'data'    => $theme_data,
+				),
+			);
+		} catch ( Exception $error ) {
+			return new WP_REST_Response(
+				array(
+					'status'  => 'FAILURE',
+					'message' => $error->getMessage(),
+				)
+			);
+		}
 	}
 
 	function rest_get_readme_data( $request ) {

package.json

@@ -20,6 +20,8 @@
 	},
 	"main": "build/index.js",
 	"dependencies": {
+		"@codemirror/lang-json": "^6.0.1",
+		"@uiw/react-codemirror": "^4.21.24",
 		"@wordpress/icons": "^9.24.0",
 		"lib-font": "^2.4.0"
 	},

src/editor-sidebar/json-editor-modal.js

@@ -0,0 +1,38 @@
+import { useState, useEffect } from '@wordpress/element';
+import { Modal } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import CodeMirror from '@uiw/react-codemirror';
+import { json } from '@codemirror/lang-json';
+import { fetchThemeJson } from '../resolvers';
+
+const ThemeJsonEditorModal = ( { onRequestClose } ) => {
+	const [ themeData, setThemeData ] = useState( '' );
+	const themeName = useSelect( ( select ) =>
+		select( 'core' ).getCurrentTheme()
+	)?.name?.raw;
+	const fetchThemeData = async () => {
+		setThemeData( await fetchThemeJson() );
+	};
+	const handleSave = () => {};
+
+	useEffect( () => {
+		fetchThemeData();
+	} );
+
+	return (
+		<Modal
+			isFullScreen
+			title={ `theme.json for ${ themeName }` }
+			onRequestClose={ onRequestClose }
+		>
+			<CodeMirror
+				extensions={ [ json() ] }
+				value={ themeData }
+				onChange={ handleSave }
+				readOnly={ true }
+			/>
+		</Modal>
+	);
+};
+
+export default ThemeJsonEditorModal;