From 83426814c291d1c142c03d4bb7175fcf3a651896 Mon Sep 17 00:00:00 2001
From: Matias Benedetto <matias.benedetto@gmail.com>
Date: Mon, 3 Jun 2024 13:30:47 +0200
Subject: [PATCH] Add an about section in the editor

---
 src/editor-sidebar/about.js | 86 +++++++++++++++++++++++++++++++++++++
 src/plugin-sidebar.js       | 26 +++++++++++
 src/plugin-styles.scss      | 11 +++++
 3 files changed, 123 insertions(+)
 create mode 100644 src/editor-sidebar/about.js

diff --git a/src/editor-sidebar/about.js b/src/editor-sidebar/about.js
new file mode 100644
index 00000000..e91de85f
--- /dev/null
+++ b/src/editor-sidebar/about.js
@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalVStack as VStack,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalText as Text,
+	PanelBody,
+	ExternalLink,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './screen-header';
+
+function AboutPlugin() {
+	return (
+		<PanelBody>
+			<ScreenHeader
+				title={ __( 'About the plugin', 'create-block-theme' ) }
+			/>
+			<VStack>
+				<Text>
+					{ __(
+						'Create Block Theme is a tool to help you make Block Themes using the WordPress Editor. It does this by adding tools to the Editor to help you create and manage your theme.',
+						'create-block-theme'
+					) }
+				</Text>
+
+				<Text>
+					{ __(
+						"Themes created with Create Block Theme don't require Create Block Theme to be installed on the site where the theme is used.",
+						'create-block-theme'
+					) }
+				</Text>
+
+				<hr />
+
+				<Text weight="bold">
+					{ __( 'Help', 'create-block-theme' ) }
+				</Text>
+
+				<Text>
+					<>
+						{ __( 'Have a question?', 'create-block-theme' ) }
+						<br />
+						<ExternalLink href="https://wordpress.org/support/plugin/create-block-theme/">
+							{ __( 'Ask in the forums.', 'create-block-theme' ) }
+						</ExternalLink>
+					</>
+				</Text>
+
+				<Text>
+					<>
+						{ __( 'Found a bug?', 'create-block-theme' ) }
+						<br />
+						<ExternalLink href="https://github.com/WordPress/create-block-theme/issues">
+							{ __(
+								'Report it on GitHub.',
+								'create-block-theme'
+							) }
+						</ExternalLink>
+					</>
+				</Text>
+
+				<Text>
+					<>
+						{ __( 'Want to contribute?', 'create-block-theme' ) }
+						<br />
+						<ExternalLink href="https://github.com/WordPress/create-block-theme">
+							{ __(
+								'Check out the project on GitHub.',
+								'create-block-theme'
+							) }
+						</ExternalLink>
+					</>
+				</Text>
+			</VStack>
+		</PanelBody>
+	);
+}
+
+export default AboutPlugin;
diff --git a/src/plugin-sidebar.js b/src/plugin-sidebar.js
index 9d30ec5d..7bc63b58 100644
--- a/src/plugin-sidebar.js
+++ b/src/plugin-sidebar.js
@@ -36,6 +36,7 @@ import {
 	chevronRight,
 	addCard,
 	blockMeta,
+	help,
 } from '@wordpress/icons';
 
 /**
@@ -50,6 +51,7 @@ import ScreenHeader from './editor-sidebar/screen-header';
 import { downloadExportedTheme } from './resolvers';
 import downloadFile from './utils/download-file';
 import './plugin-styles.scss';
+import AboutPlugin from './editor-sidebar/about';
 
 const CreateBlockThemePlugin = () => {
 	const [ isEditorOpen, setIsEditorOpen ] = useState( false );
@@ -183,6 +185,26 @@ const CreateBlockThemePlugin = () => {
 										<Icon icon={ chevronRight } />
 									</HStack>
 								</NavigatorButton>
+
+								<hr></hr>
+
+								<NavigatorButton
+									path="/about"
+									icon={ help }
+									className={
+										'create-block-theme__plugin-sidebar__about-button'
+									}
+								>
+									<Spacer />
+									<HStack>
+										<FlexItem>
+											{ __(
+												'Help',
+												'create-block-theme'
+											) }
+										</FlexItem>
+									</HStack>
+								</NavigatorButton>
 							</VStack>
 						</PanelBody>
 					</NavigatorScreen>
@@ -271,6 +293,10 @@ const CreateBlockThemePlugin = () => {
 					<NavigatorScreen path="/save">
 						<SaveThemePanel />
 					</NavigatorScreen>
+
+					<NavigatorScreen path="/about">
+						<AboutPlugin />
+					</NavigatorScreen>
 				</NavigatorProvider>
 			</PluginSidebar>
 
diff --git a/src/plugin-styles.scss b/src/plugin-styles.scss
index 4af13616..cae0c958 100644
--- a/src/plugin-styles.scss
+++ b/src/plugin-styles.scss
@@ -22,4 +22,15 @@ $modal-footer-height: 70px;
 			object-fit: cover;
 		}
 	}
+
+	&__plugin-sidebar {
+		&__about-button {
+			color: #949494;
+			margin-top: 3rem;
+		}
+
+		&__about-button svg {
+			fill: #949494;
+		}
+	}
 }