Merge pull request #1192 from tomusborne/tweak/sidebar-styling

Tweak: Add GB sidebar panel styling
tomusborne · Feb 16, 2024 · 1e86fe7 · 1e86fe7
2 parents 9c9fe62 + 0ed7ed2
commit 1e86fe7
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 21 deletions.
diff --git a/src/editor-sidebar/editor.scss b/src/editor-sidebar/editor.scss
@@ -0,0 +1,14 @@
+.gblocks-editor-sidebar {
+	.components-panel__body {
+		&.is-opened {
+			padding: 16px;
+		}
+	}
+
+	&__panel-title {
+		font-weight: 500;
+		margin: 0 0 16px !important;
+		width: 100%;
+		font-size: 13px;
+	}
+}
diff --git a/src/editor-sidebar/index.js b/src/editor-sidebar/index.js
@@ -2,6 +2,7 @@ import { registerPlugin } from '@wordpress/plugins';
 import { __ } from '@wordpress/i18n';
 import { PluginSidebar } from '@wordpress/edit-post';
 import { applyFilters } from '@wordpress/hooks';
+import { useState } from '@wordpress/element';
 import './editor.scss';
 
 function SidebarItems( props ) {
@@ -16,20 +17,27 @@ function SidebarItems( props ) {
 	);
 }
 
+function Icon() {
+	return (
+		<svg viewBox="0 0 50 60.12" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M6.686 31.622V18.918a.077.077 0 0 1 .05-.072l6.5-2.313 6.5-2.313 9.682-3.445L39.1 7.33a.067.067 0 0 0 .036-.028.074.074 0 0 0 .014-.044V.076a.077.077 0 0 0-.032-.062.076.076 0 0 0-.069-.009l-13 4.625-13 4.625-6.5 2.313-6.5 2.313a.067.067 0 0 0-.036.028.097.097 0 0 0-.013.046V52.067c0 .026.013.048.032.062s.044.018.069.009l3.267-1.163 3.267-1.163c.015-.005.028-.015.036-.028s.014-.028.014-.044V37.999l.001-6.377c-.001 0 0 0 0 0z" /><path d="m23.949 29.976 13-4.625 13-4.625c.015-.005.028-.015.036-.028s.015-.028.015-.044V8.056a.077.077 0 0 0-.032-.062.076.076 0 0 0-.069-.009l-13 4.625-13 4.625-6.5 2.313-6.5 2.313a.067.067 0 0 0-.036.028.074.074 0 0 0-.014.044V60.045c0 .026.013.048.032.062a.076.076 0 0 0 .069.009l6.475-2.304 6.475-2.304 6.525-2.322 6.525-2.322 6.5-2.313 6.5-2.313c.015-.005.028-.015.036-.028s.014-.025.014-.041V27.193a.077.077 0 0 0-.032-.062.076.076 0 0 0-.069-.009l-6.45 2.295L37 31.711a.067.067 0 0 0-.036.028.074.074 0 0 0-.014.044v6.272a.077.077 0 0 1-.05.072l-6.45 2.295L24 42.715a.075.075 0 0 1-.101-.071V30.046c0-.016.005-.031.014-.044a.08.08 0 0 1 .036-.026z" /></svg>
+	);
+}
+
 function EditorSidebar() {
-	function Icon() {
-		return (
-			<svg viewBox="0 0 50 60.12" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M6.686 31.622V18.918a.077.077 0 0 1 .05-.072l6.5-2.313 6.5-2.313 9.682-3.445L39.1 7.33a.067.067 0 0 0 .036-.028.074.074 0 0 0 .014-.044V.076a.077.077 0 0 0-.032-.062.076.076 0 0 0-.069-.009l-13 4.625-13 4.625-6.5 2.313-6.5 2.313a.067.067 0 0 0-.036.028.097.097 0 0 0-.013.046V52.067c0 .026.013.048.032.062s.044.018.069.009l3.267-1.163 3.267-1.163c.015-.005.028-.015.036-.028s.014-.028.014-.044V37.999l.001-6.377c-.001 0 0 0 0 0z" /><path d="m23.949 29.976 13-4.625 13-4.625c.015-.005.028-.015.036-.028s.015-.028.015-.044V8.056a.077.077 0 0 0-.032-.062.076.076 0 0 0-.069-.009l-13 4.625-13 4.625-6.5 2.313-6.5 2.313a.067.067 0 0 0-.036.028.074.074 0 0 0-.014.044V60.045c0 .026.013.048.032.062a.076.076 0 0 0 .069.009l6.475-2.304 6.475-2.304 6.525-2.322 6.525-2.322 6.5-2.313 6.5-2.313c.015-.005.028-.015.036-.028s.014-.025.014-.041V27.193a.077.077 0 0 0-.032-.062.076.076 0 0 0-.069-.009l-6.45 2.295L37 31.711a.067.067 0 0 0-.036.028.074.074 0 0 0-.014.044v6.272a.077.077 0 0 1-.05.072l-6.45 2.295L24 42.715a.075.075 0 0 1-.101-.071V30.046c0-.016.005-.031.014-.044a.08.08 0 0 1 .036-.026z" /></svg>
-		);
-	}
+	const [ activePanel, setActivePanel ] = useState( '' );
 
 	return (
 		<PluginSidebar
 			name="gblocks-editor-sidebar"
+			className="gblocks-editor-sidebar"
 			title={ __( 'GenerateBlocks', 'generateblocks-pro' ) }
 			icon={ <Icon /> }
 		>
-			<SidebarItems name="generateblocks.editor.sidebar" />
+			<SidebarItems
+				name="generateblocks.editor.sidebar"
+				activePanel={ activePanel }
+				setActivePanel={ setActivePanel }
+			/>
 		</PluginSidebar>
 	);
 }

diff --git a/src/pattern-library/index.js b/src/pattern-library/index.js
@@ -1,31 +1,33 @@
-import { BaseControl, Button, Modal, PanelBody } from '@wordpress/components';
+import { Button, Modal, PanelBody } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { LibraryProvider } from './components/library-provider';
 import LibraryLayout from './components/library-layout';
 import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import './editor.scss';
 
-function PatternLibrary( content ) {
+function PatternLibrary( content, { activePanel } ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 
+	if ( activePanel ) {
+		return content;
+	}
+
 	return (
 		<>
 			<PanelBody>
-				<BaseControl
-					label={ __( 'Pattern Library', 'generateblocks' ) }
-					id=""
+				<h2 className="gblocks-editor-sidebar__panel-title">
+					{ __( 'Pattern Library', 'generateblocks' ) }
+				</h2>
+
+				<Button
+					className="gblocks-pattern-library-button"
+					variant="secondary"
+					onClick={ () => setIsOpen( true ) }
+					isPressed={ isOpen }
 				>
-					<br />
-					<Button
-						className="gblocks-pattern-library-button"
-						variant="secondary"
-						onClick={ () => setIsOpen( true ) }
-						isPressed={ isOpen }
-					>
-						{ __( 'Open Pattern Library', 'generateblocks' ) }
-					</Button>
-				</BaseControl>
+					{ __( 'Open Pattern Library', 'generateblocks' ) }
+				</Button>
 			</PanelBody>
 
 			{ content }