diff --git a/src/editor-sidebar/about.js b/src/editor-sidebar/about.js
new file mode 100644
index 00000000..0f8f11a0
--- /dev/null
+++ b/src/editor-sidebar/about.js
@@ -0,0 +1,88 @@
+/**
+ * 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,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalDivider as Divider,
+ PanelBody,
+ ExternalLink,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './screen-header';
+
+function AboutPlugin() {
+ return (
+
+
+
+
+ { __(
+ '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'
+ ) }
+
+
+
+ { __(
+ "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'
+ ) }
+
+
+
+
+
+ { __( 'Help', 'create-block-theme' ) }
+
+
+
+ <>
+ { __( 'Have a question?', 'create-block-theme' ) }
+
+
+ { __( 'Ask in the forums.', 'create-block-theme' ) }
+
+ >
+
+
+
+ <>
+ { __( 'Found a bug?', 'create-block-theme' ) }
+
+
+ { __(
+ 'Report it on GitHub.',
+ 'create-block-theme'
+ ) }
+
+ >
+
+
+
+ <>
+ { __( 'Want to contribute?', 'create-block-theme' ) }
+
+
+ { __(
+ 'Check out the project on GitHub.',
+ 'create-block-theme'
+ ) }
+
+ >
+
+
+
+ );
+}
+
+export default AboutPlugin;
diff --git a/src/plugin-sidebar.js b/src/plugin-sidebar.js
index 9d30ec5d..08c6e274 100644
--- a/src/plugin-sidebar.js
+++ b/src/plugin-sidebar.js
@@ -22,6 +22,8 @@ import {
__experimentalHStack as HStack,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalText as Text,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalDivider as Divider,
Button,
Icon,
FlexItem,
@@ -36,6 +38,7 @@ import {
chevronRight,
addCard,
blockMeta,
+ help,
} from '@wordpress/icons';
/**
@@ -50,6 +53,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 );
@@ -155,7 +159,7 @@ const CreateBlockThemePlugin = () => {
>
{ __( 'Export Zip', 'create-block-theme' ) }
-
+
{
+
+
+
+
+
+
+
+ { __(
+ 'Help',
+ 'create-block-theme'
+ ) }
+
+
+
@@ -202,7 +226,7 @@ const CreateBlockThemePlugin = () => {
'create-block-theme'
) }
-
+
{
'create-block-theme'
) }
-
+
{
+
+
+
+
diff --git a/src/plugin-styles.scss b/src/plugin-styles.scss
index 4af13616..9c068ccb 100644
--- a/src/plugin-styles.scss
+++ b/src/plugin-styles.scss
@@ -1,3 +1,5 @@
+@import "~@wordpress/base-styles/colors";
+
$plugin-prefix: "create-block-theme";
$modal-footer-height: 70px;
@@ -22,4 +24,15 @@ $modal-footer-height: 70px;
object-fit: cover;
}
}
+
+ &__plugin-sidebar {
+ &__about-button {
+ color: $gray-600;
+ margin-top: 3rem;
+ }
+
+ &__about-button svg {
+ fill: $gray-600;
+ }
+ }
}