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; + } + } }