Global Styles JSON data inspector (#697)

* Add global styles inspector * rename option * rename option Co-authored-by: Jeff Ong <[email protected]> * rename option --------- Co-authored-by: Jeff Ong <[email protected]>
WordPress · Aug 12, 2024 · 36310c3 · 36310c3
1 parent a8b2e52
commit 36310c3
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 0 deletions.
diff --git a/src/editor-sidebar/global-styles-json-editor-modal.js b/src/editor-sidebar/global-styles-json-editor-modal.js
@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import CodeMirror from '@uiw/react-codemirror';
+import { json } from '@codemirror/lang-json';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Modal } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+const GlobalStylesJsonEditorModal = ( { onRequestClose } ) => {
+	const themeName = useSelect( ( select ) =>
+		select( 'core' ).getCurrentTheme()
+	)?.name?.raw;
+
+	const { record: globalStylesRecord } = useSelect( ( select ) => {
+		const {
+			__experimentalGetCurrentGlobalStylesId,
+			getEditedEntityRecord,
+		} = select( coreStore );
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const record = getEditedEntityRecord(
+			'root',
+			'globalStyles',
+			globalStylesId
+		);
+		return {
+			record,
+		};
+	} );
+
+	const globalStyles = {
+		...( globalStylesRecord?.styles && {
+			styles: globalStylesRecord.styles,
+		} ),
+		...( globalStylesRecord?.settings && {
+			settings: globalStylesRecord.settings,
+		} ),
+	};
+
+	const globalStylesAsString = globalStyles
+		? JSON.stringify( globalStyles, null, 4 )
+		: '';
+
+	const handleSave = () => {};
+
+	return (
+		<Modal
+			size="large"
+			title={ sprintf(
+				// translators: %s: theme name.
+				__( 'Custom Styles for %s', 'create-block-theme' ),
+				themeName
+			) }
+			onRequestClose={ onRequestClose }
+			className="create-block-theme__theme-json-modal"
+		>
+			<CodeMirror
+				extensions={ [ json() ] }
+				value={ globalStylesAsString }
+				onChange={ handleSave }
+				readOnly
+			/>
+		</Modal>
+	);
+};
+
+export default GlobalStylesJsonEditorModal;
diff --git a/src/plugin-sidebar.js b/src/plugin-sidebar.js
@@ -47,6 +47,7 @@ import {
  */
 import { CreateThemePanel } from './editor-sidebar/create-panel';
 import ThemeJsonEditorModal from './editor-sidebar/json-editor-modal';
+import GlobalStylesJsonEditorModal from './editor-sidebar/global-styles-json-editor-modal';
 import { SaveThemePanel } from './editor-sidebar/save-panel';
 import { CreateVariationPanel } from './editor-sidebar/create-variation-panel';
 import { ThemeMetadataEditorModal } from './editor-sidebar/metadata-editor-modal';
@@ -59,6 +60,8 @@ import './plugin-styles.scss';
 
 const CreateBlockThemePlugin = () => {
 	const [ isEditorOpen, setIsEditorOpen ] = useState( false );
+	const [ isGlobalStylesEditorOpen, setIsGlobalStylesEditorOpen ] =
+		useState( false );
 
 	const [ isMetadataEditorOpen, setIsMetadataEditorOpen ] = useState( false );
 
@@ -155,6 +158,17 @@ const CreateBlockThemePlugin = () => {
 										'create-block-theme'
 									) }
 								</Button>
+								<Button
+									icon={ code }
+									onClick={ () =>
+										setIsGlobalStylesEditorOpen( true )
+									}
+								>
+									{ __(
+										'View Custom Styles',
+										'create-block-theme'
+									) }
+								</Button>
 								<Button
 									icon={ download }
 									onClick={ () => handleExportClick() }
@@ -329,6 +343,14 @@ const CreateBlockThemePlugin = () => {
 				/>
 			) }
 
+			{ isGlobalStylesEditorOpen && (
+				<GlobalStylesJsonEditorModal
+					onRequestClose={ () =>
+						setIsGlobalStylesEditorOpen( false )
+					}
+				/>
+			) }
+
 			{ isMetadataEditorOpen && (
 				<ThemeMetadataEditorModal
 					onRequestClose={ () => setIsMetadataEditorOpen( false ) }