Add: Reset button to global styles sidebar

WordPress · Sep 24, 2020 · c00d25b · c00d25b
1 parent b34113c
commit c00d25b
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 8 deletions.
diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js
@@ -8,6 +8,7 @@ import { set, get } from 'lodash';
  */
 import {
 	createContext,
+	useCallback,
 	useContext,
 	useEffect,
 	useMemo,
@@ -20,6 +21,8 @@ import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY } from '@wordpress/bloc
  */
 import getGlobalStyles from './global-styles-renderer';
 
+const EMPTY_CONTENT = '{}';
+
 const GlobalStylesContext = createContext( {
 	/* eslint-disable no-unused-vars */
 	getStyleProperty: ( context, propertyName ) => {},
@@ -30,12 +33,21 @@ const GlobalStylesContext = createContext( {
 
 export const useGlobalStylesContext = () => useContext( GlobalStylesContext );
 
+const useGlobalStylesEntityContent = () => {
+	return useEntityProp( 'postType', 'wp_global_styles', 'content' );
+};
+
+export const useGlobalStylesReset = () => {
+	const [ content, setContent ] = useGlobalStylesEntityContent();
+	const canRestart = !! content && content !== EMPTY_CONTENT;
+	return [
+		canRestart,
+		useCallback( () => setContent( EMPTY_CONTENT ), [ setContent ] ),
+	];
+};
+
 export default ( { children, baseStyles, contexts } ) => {
-	const [ content, setContent ] = useEntityProp(
-		'postType',
-		'wp_global_styles',
-		'content'
-	);
+	const [ content, setContent ] = useGlobalStylesEntityContent();
 
 	const userStyles = useMemo(
 		() => ( content ? JSON.parse( content ) : {} ),

diff --git a/packages/edit-site/src/components/sidebar/default-sidebar.js b/packages/edit-site/src/components/sidebar/default-sidebar.js
@@ -6,15 +6,25 @@ import {
 	ComplementaryAreaMoreMenuItem,
 } from '@wordpress/interface';
 
-export default ( { identifier, title, icon, children, closeLabel } ) => {
+export default ( {
+	className,
+	identifier,
+	title,
+	icon,
+	children,
+	closeLabel,
+	header,
+} ) => {
 	return (
 		<>
 			<ComplementaryArea
+				className={ className }
 				scope="core/edit-site"
 				identifier={ identifier }
 				title={ title }
 				icon={ icon }
 				closeLabel={ closeLabel }
+				header={ header }
 			>
 				{ children }
 			</ComplementaryArea>

diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
@@ -6,14 +6,17 @@ import { omit } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { PanelBody, TabPanel } from '@wordpress/components';
+import { Button, PanelBody, TabPanel } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import { useGlobalStylesContext } from '../editor/global-styles-provider';
+import {
+	useGlobalStylesContext,
+	useGlobalStylesReset,
+} from '../editor/global-styles-provider';
 import DefaultSidebar from './default-sidebar';
 import { GLOBAL_CONTEXT } from '../editor/utils';
 import TypographyPanel from './typography-panel';
@@ -25,6 +28,7 @@ export default ( { identifier, title, icon, closeLabel } ) => {
 		getStyleProperty,
 		setStyleProperty,
 	} = useGlobalStylesContext();
+	const [ canRestart, onReset ] = useGlobalStylesReset();
 
 	if ( typeof contexts !== 'object' || ! contexts?.[ GLOBAL_CONTEXT ] ) {
 		// No sidebar is shown.
@@ -33,10 +37,25 @@ export default ( { identifier, title, icon, closeLabel } ) => {
 
 	return (
 		<DefaultSidebar
+			className="edit-site-global-styles-sidebar"
 			identifier={ identifier }
 			title={ title }
 			icon={ icon }
 			closeLabel={ closeLabel }
+			header={
+				<>
+					<strong>{ title }</strong>
+					<Button
+						className="edit-site-global-styles-sidebar__reset-button"
+						isSmall
+						isTertiary
+						disabled={ ! canRestart }
+						onClick={ onReset }
+					>
+						{ __( 'Reset to defaults' ) }
+					</Button>
+				</>
+			}
 		>
 			<TabPanel
 				tabs={ [

diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
@@ -16,3 +16,11 @@
 		margin: 0;
 	}
 }
+
+.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
+	margin-left: 0;
+}
+
+.edit-site-global-styles-sidebar__reset-button.components-button {
+	margin-left: auto;
+}