diff --git a/src/editor-sidebar/about.js b/src/editor-sidebar/about.js index 0f8f11a0..17ee4992 100644 --- a/src/editor-sidebar/about.js +++ b/src/editor-sidebar/about.js @@ -7,9 +7,8 @@ import { __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, + Card, + CardBody, ExternalLink, } from '@wordpress/components'; @@ -20,68 +19,69 @@ 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' ) } -
- + description={ + + { __( - 'Report it on GitHub.', + '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' ) } - - - - - - <> - { __( 'Want to contribute?', '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' + ) } + + + { __( - 'Check out the project on GitHub.', + 'Want to contribute?', 'create-block-theme' ) } - - - - - +
+ + { __( + 'Check out the project on GitHub.', + 'create-block-theme' + ) } + + + + + + ); } diff --git a/src/editor-sidebar/create-panel.js b/src/editor-sidebar/create-panel.js index 5b95d4ff..d1681270 100644 --- a/src/editor-sidebar/create-panel.js +++ b/src/editor-sidebar/create-panel.js @@ -12,8 +12,9 @@ import { __experimentalSpacer as Spacer, // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalText as Text, - PanelBody, Button, + Card, + CardBody, SelectControl, TextControl, TextareaControl, @@ -124,145 +125,178 @@ export const CreateThemePanel = ( { createType } ) => { }; return ( - + <> - - - setTheme( { ...theme, name: value } ) - } - /> -
- - { __( - 'Additional Theme MetaData', - 'create-block-theme' - ) } - - + + - - setTheme( { ...theme, description: value } ) - } - placeholder={ __( - 'A short description of the theme', - 'create-block-theme' - ) } - /> - - setTheme( { ...theme, uri: value } ) - } - placeholder={ __( - 'https://github.com/wordpress/twentytwentythree/', - 'create-block-theme' - ) } - /> - setTheme( { ...theme, author: value } ) + setTheme( { ...theme, name: value } ) } - placeholder={ __( - 'the WordPress team', - 'create-block-theme' - ) } - /> - - setTheme( { ...theme, author_uri: value } ) - } - placeholder={ __( - 'https://wordpress.org/', - 'create-block-theme' - ) } - /> - ( { - label: version, - value: version, - } ) - ) } - onChange={ ( value ) => { - setTheme( { ...theme, requires_wp: value } ); - } } /> +
+ + { __( + 'Additional Theme MetaData', + 'create-block-theme' + ) } + + + + + setTheme( { + ...theme, + description: value, + } ) + } + placeholder={ __( + 'A short description of the theme', + 'create-block-theme' + ) } + /> + + setTheme( { ...theme, uri: value } ) + } + placeholder={ __( + 'https://github.com/wordpress/twentytwentythree/', + 'create-block-theme' + ) } + /> + + setTheme( { + ...theme, + author: value, + } ) + } + placeholder={ __( + 'the WordPress team', + 'create-block-theme' + ) } + /> + + setTheme( { + ...theme, + author_uri: value, + } ) + } + placeholder={ __( + 'https://wordpress.org/', + 'create-block-theme' + ) } + /> + ( { + label: version, + value: version, + } ) + ) } + onChange={ ( value ) => { + setTheme( { + ...theme, + requires_wp: value, + } ); + } } + /> + + +
+ { createType === 'createClone' && ( + <> + + + ) } + { createType === 'createChild' && ( + <> + + + ) } + { createType === 'createBlank' && ( + <> + + + { __( + 'Create a blank theme with no styles or templates.', + 'create-block-theme' + ) } + + + ) } -
-
- { createType === 'createClone' && ( - <> - - - ) } - { createType === 'createChild' && ( - <> - - - ) } - { createType === 'createBlank' && ( - <> - - - - { __( - 'Create a blank theme with no styles or templates.', - 'create-block-theme' - ) } - - - ) } - - + + + ); }; diff --git a/src/editor-sidebar/create-variation-panel.js b/src/editor-sidebar/create-variation-panel.js index 4fe6d188..48ad28f9 100644 --- a/src/editor-sidebar/create-variation-panel.js +++ b/src/editor-sidebar/create-variation-panel.js @@ -10,12 +10,9 @@ import { __experimentalVStack as VStack, // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalText as Text, - // eslint-disable-next-line @wordpress/no-unsafe-wp-apis - __experimentalSpacer as Spacer, - // eslint-disable-next-line @wordpress/no-unsafe-wp-apis - __experimentalView as View, - PanelBody, Button, + Card, + CardBody, TextControl, CheckboxControl, } from '@wordpress/components'; @@ -86,65 +83,61 @@ export const CreateVariationPanel = () => { }; return ( - + <> + { __( + 'Save the Global Styles changes as a theme variation.', + 'create-block-theme' + ) } + + } /> - - - - { __( - 'Save the Global Styles changes as a theme variation.', - 'create-block-theme' - ) } - - - - - - - setTheme( { ...theme, name: value } ) - } - /> - - - handleTogglePreference( 'saveFonts' ) - } - /> - - - - - - - + + + + + setTheme( { + ...theme, + name: value, + } ) + } + /> + + handleTogglePreference( 'saveFonts' ) + } + /> + + + + + ); }; diff --git a/src/editor-sidebar/reset-theme.js b/src/editor-sidebar/reset-theme.js index fa770371..99da3782 100644 --- a/src/editor-sidebar/reset-theme.js +++ b/src/editor-sidebar/reset-theme.js @@ -9,9 +9,10 @@ import { __experimentalConfirmDialog as ConfirmDialog, // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalVStack as VStack, - PanelBody, Button, CheckboxControl, + Card, + CardBody, } from '@wordpress/components'; import { trash } from '@wordpress/icons'; import { useState } from '@wordpress/element'; @@ -90,72 +91,70 @@ function ResetTheme() { 'create-block-theme' ) } - - - - - handleTogglePreference( 'resetStyles' ) - } - /> - - - handleTogglePreference( 'resetTemplates' ) - } - /> - - - handleTogglePreference( 'resetTemplateParts' ) - } - /> - - + + + ); } diff --git a/src/editor-sidebar/save-panel.js b/src/editor-sidebar/save-panel.js index d126a5d2..568cddf0 100644 --- a/src/editor-sidebar/save-panel.js +++ b/src/editor-sidebar/save-panel.js @@ -8,8 +8,9 @@ import apiFetch from '@wordpress/api-fetch'; import { // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalVStack as VStack, - PanelBody, Button, + Card, + CardBody, CheckboxControl, } from '@wordpress/components'; import { archive } from '@wordpress/icons'; @@ -99,155 +100,174 @@ export const SaveThemePanel = () => { }; return ( - + - - handleTogglePreference( 'saveFonts' ) } - /> - handleTogglePreference( 'saveStyle' ) } - /> - handleTogglePreference( 'saveTemplates' ) } - /> - - handleTogglePreference( 'processOnlySavedTemplates' ) - } - /> - handleTogglePreference( 'savePatterns' ) } - /> - handleTogglePreference( 'localizeText' ) } - /> - - handleTogglePreference( 'localizeImages' ) - } - /> - handleTogglePreference( 'removeNavRefs' ) } - /> - - handleTogglePreference( 'removeTaxQuery' ) - } - /> - - - + + + handleTogglePreference( 'saveFonts' ) } + /> + handleTogglePreference( 'saveStyle' ) } + /> + + handleTogglePreference( 'saveTemplates' ) + } + /> + + handleTogglePreference( + 'processOnlySavedTemplates' + ) + } + /> + + handleTogglePreference( 'savePatterns' ) + } + /> + + handleTogglePreference( 'localizeText' ) + } + /> + + handleTogglePreference( 'localizeImages' ) + } + /> + + handleTogglePreference( 'removeNavRefs' ) + } + /> + + handleTogglePreference( 'removeTaxQuery' ) + } + /> + + + + ); }; diff --git a/src/editor-sidebar/screen-header.js b/src/editor-sidebar/screen-header.js index edb6a822..d958c097 100644 --- a/src/editor-sidebar/screen-header.js +++ b/src/editor-sidebar/screen-header.js @@ -6,6 +6,8 @@ import { // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalHStack as HStack, // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __experimentalVStack as VStack, + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalSpacer as Spacer, // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalHeading as Heading, @@ -15,31 +17,34 @@ import { import { isRTL, __ } from '@wordpress/i18n'; import { chevronRight, chevronLeft } from '@wordpress/icons'; -const ScreenHeader = ( { title, onBack } ) => { +const ScreenHeader = ( { title, onBack, description } ) => { // TODO: Remove the fallback component when the minimum supported WordPress // version was increased to 6.8. const BackButton = Navigator?.BackButton || NavigatorToParentButton; return ( - - - - - - { title } - - - + + + + + + + { title } + + + + { description } + ); }; diff --git a/src/plugin-sidebar.js b/src/plugin-sidebar.js index 2bfcb027..90d487d0 100644 --- a/src/plugin-sidebar.js +++ b/src/plugin-sidebar.js @@ -20,13 +20,12 @@ 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, - // eslint-disable-next-line @wordpress/no-unsafe-wp-apis Button, + Card, + CardBody, + CardDivider, Icon, FlexItem, - PanelBody, } from '@wordpress/components'; import { tool, @@ -58,10 +57,10 @@ import AboutPlugin from './editor-sidebar/about'; import ResetTheme from './editor-sidebar/reset-theme'; import './plugin-styles.scss'; -function PluginSidebarItem( { icon, path, children, ...props } ) { +function PluginSidebarItem( { icon, path, children, onClick } ) { const ItemWrapper = path ? NavigatorButton : Button; return ( - + @@ -123,153 +122,188 @@ const CreateBlockThemePlugin = () => { 'UI String', 'create-block-theme' ) } + className="create-block-theme-sidebar" > - - - - { __( - 'Save Changes to Theme', - 'create-block-theme' - ) } - - - { __( - 'Create Theme Variation', - 'create-block-theme' - ) } - - - setIsMetadataEditorOpen( true ) - } - > - { __( - 'Edit Theme Metadata', - 'create-block-theme' - ) } - - setIsEditorOpen( true ) } - > - { __( - 'View theme.json', - 'create-block-theme' - ) } - - - setIsGlobalStylesEditorOpen( true ) - } - > - { __( - 'View Custom Styles', - 'create-block-theme' - ) } - - handleExportClick() } - > - { __( 'Export Zip', 'create-block-theme' ) } - - - - { __( - 'Create Blank Theme', - 'create-block-theme' - ) } - - - { __( - 'Create Theme', - 'create-block-theme' - ) } - - - - - - { __( - 'Reset Theme', - 'create-block-theme' - ) } - - - - - - { __( 'Help', 'create-block-theme' ) } - - - + + + + + { __( + 'Save Changes to Theme', + 'create-block-theme' + ) } + + + { __( + 'Create Theme Variation', + 'create-block-theme' + ) } + + + setIsMetadataEditorOpen( true ) + } + > + { __( + 'Edit Theme Metadata', + 'create-block-theme' + ) } + + + setIsEditorOpen( true ) + } + > + { __( + 'View theme.json', + 'create-block-theme' + ) } + + + setIsGlobalStylesEditorOpen( true ) + } + > + { __( + 'View Custom Styles', + 'create-block-theme' + ) } + + handleExportClick() } + > + { __( + 'Export Zip', + 'create-block-theme' + ) } + + + + + + + + { __( + 'Create Blank Theme', + 'create-block-theme' + ) } + + + { __( + 'Create Theme', + 'create-block-theme' + ) } + + + + + + + + { __( + 'Reset Theme', + 'create-block-theme' + ) } + + + + + + + + { __( 'Help', 'create-block-theme' ) } + + + + - - - + { __( 'Would you like to clone this Theme or create a Child Theme?', 'create-block-theme' ) } - - { - setCloneCreateType( 'createClone' ); - } } - > - { __( - 'Clone Theme', - 'create-block-theme' - ) } - - - { __( - 'Create a clone of this theme with a new name. The user changes will be preserved in the new theme.', - 'create-block-theme' - ) } - - - { - setCloneCreateType( 'createChild' ); - } } - > - { __( - 'Create Child Theme', - 'create-block-theme' - ) } - - - { __( - 'Create a child theme that uses this theme as a parent. This theme will remain unchanged and the user changes will be preserved in the new child theme.', - 'create-block-theme' - ) } - - - + } + /> + + + + { + setCloneCreateType( 'createClone' ); + } } + > + { __( + 'Clone Theme', + 'create-block-theme' + ) } + + + { __( + 'Create a clone of this theme with a new name. The user changes will be preserved in the new theme.', + 'create-block-theme' + ) } + + + + + + + { + setCloneCreateType( 'createChild' ); + } } + > + { __( + 'Create Child Theme', + 'create-block-theme' + ) } + + + { __( + 'Create a child theme that uses this theme as a parent. This theme will remain unchanged and the user changes will be preserved in the new child theme.', + 'create-block-theme' + ) } + + + + diff --git a/src/plugin-styles.scss b/src/plugin-styles.scss index 4170bd7c..f80c7463 100644 --- a/src/plugin-styles.scss +++ b/src/plugin-styles.scss @@ -1,27 +1,29 @@ @import "~@wordpress/base-styles/colors"; -$plugin-prefix: "create-block-theme"; $modal-footer-height: 70px; -.#{$plugin-prefix} { - &__metadata-editor-modal { - padding-bottom: $modal-footer-height; +.create-block-theme-sidebar hr { + margin: 0; +} - &__footer { - border-top: 1px solid #ddd; - background-color: #fff; - position: absolute; - bottom: 0; - margin: 0 -32px; - padding: 16px 32px; - height: $modal-footer-height; - } +.create-block-theme__metadata-editor-modal { + padding-bottom: $modal-footer-height; +} - &__screenshot { - max-width: 200px; - height: auto; - aspect-ratio: 4 / 3; - object-fit: cover; - } - } +.create-block-theme__metadata-editor-modal__footer { + border-top: 1px solid #ddd; + background-color: #fff; + position: absolute; + bottom: 0; + margin: 0 -32px; + padding: 16px 32px; + height: $modal-footer-height; } + +.create-block-theme__metadata-editor-modal__screenshot { + max-width: 200px; + height: auto; + aspect-ratio: 4 / 3; + object-fit: cover; +} +