From a5662fc293cfa7fe66952c388f7f72bab1538bf7 Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Sat, 24 Jan 2026 16:44:36 +0900
Subject: [PATCH] Polish sidebar using Card component

---
 src/editor-sidebar/about.js                  | 114 +++----
 src/editor-sidebar/create-panel.js           | 294 +++++++++--------
 src/editor-sidebar/create-variation-panel.js | 117 ++++---
 src/editor-sidebar/reset-theme.js            | 133 ++++----
 src/editor-sidebar/save-panel.js             | 316 ++++++++++---------
 src/editor-sidebar/screen-header.js          |  47 +--
 src/plugin-sidebar.js                        | 316 ++++++++++---------
 src/plugin-styles.scss                       |  42 +--
 8 files changed, 733 insertions(+), 646 deletions(-)

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 (
-		<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>
-
-				<Divider />
-
-				<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">
+				description={
+					<VStack>
+						<Text>
 							{ __(
-								'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'
 							) }
-						</ExternalLink>
-					</>
-				</Text>
-
-				<Text>
-					<>
-						{ __( 'Want to contribute?', 'create-block-theme' ) }
-						<br />
-						<ExternalLink href="https://github.com/WordPress/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>
+					</VStack>
+				}
+			/>
+			<Card size="small" isBorderless>
+				<CardBody>
+					<VStack>
+						<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>
 							{ __(
-								'Check out the project on GitHub.',
+								'Want to contribute?',
 								'create-block-theme'
 							) }
-						</ExternalLink>
-					</>
-				</Text>
-			</VStack>
-		</PanelBody>
+							<br />
+							<ExternalLink href="https://github.com/WordPress/create-block-theme">
+								{ __(
+									'Check out the project on GitHub.',
+									'create-block-theme'
+								) }
+							</ExternalLink>
+						</Text>
+					</VStack>
+				</CardBody>
+			</Card>
+		</>
 	);
 }
 
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 (
-		<PanelBody>
+		<>
 			<ScreenHeader
 				title={ __( 'Create Theme', 'create-block-theme' ) }
 			/>
-			<VStack>
-				<TextControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Theme name', 'create-block-theme' ) }
-					value={ theme.name }
-					onChange={ ( value ) =>
-						setTheme( { ...theme, name: value } )
-					}
-				/>
-				<details>
-					<summary>
-						{ __(
-							'Additional Theme MetaData',
-							'create-block-theme'
-						) }
-					</summary>
-					<Spacer />
+			<Card size="small" isBorderless>
+				<CardBody>
 					<VStack spacing={ 4 }>
-						<TextareaControl
-							__nextHasNoMarginBottom
-							label={ __(
-								'Theme description',
-								'create-block-theme'
-							) }
-							value={ theme.description }
-							onChange={ ( value ) =>
-								setTheme( { ...theme, description: value } )
-							}
-							placeholder={ __(
-								'A short description of the theme',
-								'create-block-theme'
-							) }
-						/>
-						<TextControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							label={ __( 'Theme URI', 'create-block-theme' ) }
-							value={ theme.uri }
-							onChange={ ( value ) =>
-								setTheme( { ...theme, uri: value } )
-							}
-							placeholder={ __(
-								'https://github.com/wordpress/twentytwentythree/',
-								'create-block-theme'
-							) }
-						/>
 						<TextControl
 							__nextHasNoMarginBottom
 							__next40pxDefaultSize
-							label={ __( 'Author', 'create-block-theme' ) }
-							value={ theme.author }
+							label={ __( 'Theme name', 'create-block-theme' ) }
+							value={ theme.name }
 							onChange={ ( value ) =>
-								setTheme( { ...theme, author: value } )
+								setTheme( { ...theme, name: value } )
 							}
-							placeholder={ __(
-								'the WordPress team',
-								'create-block-theme'
-							) }
-						/>
-						<TextControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							label={ __( 'Author URI', 'create-block-theme' ) }
-							value={ theme.author_uri }
-							onChange={ ( value ) =>
-								setTheme( { ...theme, author_uri: value } )
-							}
-							placeholder={ __(
-								'https://wordpress.org/',
-								'create-block-theme'
-							) }
-						/>
-						<SelectControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							label={ __(
-								'Minimum WordPress version',
-								'create-block-theme'
-							) }
-							value={ theme.requires_wp }
-							options={ WP_MINIMUM_VERSIONS.map(
-								( version ) => ( {
-									label: version,
-									value: version,
-								} )
-							) }
-							onChange={ ( value ) => {
-								setTheme( { ...theme, requires_wp: value } );
-							} }
 						/>
+						<details>
+							<summary>
+								{ __(
+									'Additional Theme MetaData',
+									'create-block-theme'
+								) }
+							</summary>
+							<Spacer paddingTop={ 4 } marginBottom={ 0 }>
+								<VStack spacing={ 4 }>
+									<TextareaControl
+										__nextHasNoMarginBottom
+										label={ __(
+											'Theme description',
+											'create-block-theme'
+										) }
+										value={ theme.description }
+										onChange={ ( value ) =>
+											setTheme( {
+												...theme,
+												description: value,
+											} )
+										}
+										placeholder={ __(
+											'A short description of the theme',
+											'create-block-theme'
+										) }
+									/>
+									<TextControl
+										__nextHasNoMarginBottom
+										__next40pxDefaultSize
+										label={ __(
+											'Theme URI',
+											'create-block-theme'
+										) }
+										value={ theme.uri }
+										onChange={ ( value ) =>
+											setTheme( { ...theme, uri: value } )
+										}
+										placeholder={ __(
+											'https://github.com/wordpress/twentytwentythree/',
+											'create-block-theme'
+										) }
+									/>
+									<TextControl
+										__nextHasNoMarginBottom
+										__next40pxDefaultSize
+										label={ __(
+											'Author',
+											'create-block-theme'
+										) }
+										value={ theme.author }
+										onChange={ ( value ) =>
+											setTheme( {
+												...theme,
+												author: value,
+											} )
+										}
+										placeholder={ __(
+											'the WordPress team',
+											'create-block-theme'
+										) }
+									/>
+									<TextControl
+										__nextHasNoMarginBottom
+										__next40pxDefaultSize
+										label={ __(
+											'Author URI',
+											'create-block-theme'
+										) }
+										value={ theme.author_uri }
+										onChange={ ( value ) =>
+											setTheme( {
+												...theme,
+												author_uri: value,
+											} )
+										}
+										placeholder={ __(
+											'https://wordpress.org/',
+											'create-block-theme'
+										) }
+									/>
+									<SelectControl
+										__nextHasNoMarginBottom
+										__next40pxDefaultSize
+										label={ __(
+											'Minimum WordPress version',
+											'create-block-theme'
+										) }
+										value={ theme.requires_wp }
+										options={ WP_MINIMUM_VERSIONS.map(
+											( version ) => ( {
+												label: version,
+												value: version,
+											} )
+										) }
+										onChange={ ( value ) => {
+											setTheme( {
+												...theme,
+												requires_wp: value,
+											} );
+										} }
+									/>
+								</VStack>
+							</Spacer>
+						</details>
+						{ createType === 'createClone' && (
+							<>
+								<Button
+									icon={ copy }
+									variant="primary"
+									onClick={ () => cloneTheme() }
+								>
+									{ __(
+										'Create Theme',
+										'create-block-theme'
+									) }
+								</Button>
+							</>
+						) }
+						{ createType === 'createChild' && (
+							<>
+								<Button
+									icon={ copy }
+									variant="primary"
+									onClick={ () => cloneTheme() }
+								>
+									{ __(
+										'Create Child Theme',
+										'create-block-theme'
+									) }
+								</Button>
+							</>
+						) }
+						{ createType === 'createBlank' && (
+							<>
+								<Button
+									icon={ addCard }
+									variant="primary"
+									onClick={ handleCreateBlankClick }
+								>
+									{ __(
+										'Create Blank Theme',
+										'create-block-theme'
+									) }
+								</Button>
+								<Text variant="muted">
+									{ __(
+										'Create a blank theme with no styles or templates.',
+										'create-block-theme'
+									) }
+								</Text>
+							</>
+						) }
 					</VStack>
-				</details>
-				<br />
-				{ createType === 'createClone' && (
-					<>
-						<Button
-							icon={ copy }
-							variant="primary"
-							onClick={ () => cloneTheme() }
-						>
-							{ __( 'Create Theme', 'create-block-theme' ) }
-						</Button>
-					</>
-				) }
-				{ createType === 'createChild' && (
-					<>
-						<Button
-							icon={ copy }
-							variant="primary"
-							onClick={ () => cloneTheme() }
-						>
-							{ __( 'Create Child Theme', 'create-block-theme' ) }
-						</Button>
-					</>
-				) }
-				{ createType === 'createBlank' && (
-					<>
-						<Button
-							icon={ addCard }
-							variant="primary"
-							onClick={ handleCreateBlankClick }
-						>
-							{ __( 'Create Blank Theme', 'create-block-theme' ) }
-						</Button>
-						<Spacer />
-						<Text variant="muted">
-							{ __(
-								'Create a blank theme with no styles or templates.',
-								'create-block-theme'
-							) }
-						</Text>
-					</>
-				) }
-			</VStack>
-		</PanelBody>
+				</CardBody>
+			</Card>
+		</>
 	);
 };
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 (
-		<PanelBody>
+		<>
 			<ScreenHeader
 				title={ __( 'Create Variation', 'create-block-theme' ) }
+				description={
+					<Text>
+						{ __(
+							'Save the Global Styles changes as a theme variation.',
+							'create-block-theme'
+						) }
+					</Text>
+				}
 			/>
-
-			<VStack>
-				<Text as="p">
-					{ __(
-						'Save the Global Styles changes as a theme variation.',
-						'create-block-theme'
-					) }
-				</Text>
-
-				<View>
-					<Spacer paddingY={ 4 }>
-						<VStack spacing={ 4 }>
-							<TextControl
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								label={ __(
-									'Variation name',
-									'create-block-theme'
-								) }
-								value={ theme.name }
-								onChange={ ( value ) =>
-									setTheme( { ...theme, name: value } )
-								}
-							/>
-
-							<CheckboxControl
-								__nextHasNoMarginBottom
-								label={ __(
-									'Save Fonts',
-									'create-block-theme'
-								) }
-								help={ __(
-									'Copy the font assets to the theme folder.',
-									'create-block-theme'
-								) }
-								checked={ preference.saveFonts }
-								onChange={ () =>
-									handleTogglePreference( 'saveFonts' )
-								}
-							/>
-
-							<Button
-								icon={ copy }
-								variant="primary"
-								onClick={ handleCreateVariationClick }
-							>
-								{ __(
-									'Create Theme Variation',
-									'create-block-theme'
-								) }
-							</Button>
-						</VStack>
-					</Spacer>
-				</View>
-			</VStack>
-		</PanelBody>
+			<Card size="small" isBorderless>
+				<CardBody>
+					<VStack spacing={ 4 }>
+						<TextControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __(
+								'Variation name',
+								'create-block-theme'
+							) }
+							value={ theme.name }
+							onChange={ ( value ) =>
+								setTheme( {
+									...theme,
+									name: value,
+								} )
+							}
+						/>
+						<CheckboxControl
+							__nextHasNoMarginBottom
+							label={ __( 'Save Fonts', 'create-block-theme' ) }
+							help={ __(
+								'Copy the font assets to the theme folder.',
+								'create-block-theme'
+							) }
+							checked={ preference.saveFonts }
+							onChange={ () =>
+								handleTogglePreference( 'saveFonts' )
+							}
+						/>
+						<Button
+							icon={ copy }
+							variant="primary"
+							onClick={ handleCreateVariationClick }
+						>
+							{ __(
+								'Create Theme Variation',
+								'create-block-theme'
+							) }
+						</Button>
+					</VStack>
+				</CardBody>
+			</Card>
+		</>
 	);
 };
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'
 				) }
 			</ConfirmDialog>
-			<PanelBody>
-				<ScreenHeader
-					title={ __( 'Reset Theme', 'create-block-theme' ) }
-				/>
-				<VStack spacing={ 4 }>
-					<CheckboxControl
-						__nextHasNoMarginBottom
-						label={ __(
-							'Reset theme styles',
-							'create-block-theme'
-						) }
-						help={ __(
-							'Reset customizations to theme styles and settings.',
-							'create-block-theme'
-						) }
-						checked={ preferences.resetStyles }
-						onChange={ () =>
-							handleTogglePreference( 'resetStyles' )
-						}
-					/>
-
-					<CheckboxControl
-						__nextHasNoMarginBottom
-						label={ __(
-							'Reset theme templates',
-							'create-block-theme'
-						) }
-						help={ __(
-							'Reset customizations to theme templates.',
-							'create-block-theme'
-						) }
-						checked={ preferences.resetTemplates }
-						onChange={ () =>
-							handleTogglePreference( 'resetTemplates' )
-						}
-					/>
-
-					<CheckboxControl
-						__nextHasNoMarginBottom
-						label={ __(
-							'Reset theme template-parts',
-							'create-block-theme'
-						) }
-						help={ __(
-							'Reset customizations to theme template-parts.',
-							'create-block-theme'
-						) }
-						checked={ preferences.resetTemplateParts }
-						onChange={ () =>
-							handleTogglePreference( 'resetTemplateParts' )
-						}
-					/>
-
-					<Button
-						text={ __( 'Reset Theme', 'create-block-theme' ) }
-						variant="primary"
-						icon={ trash }
-						disabled={
-							! preferences.resetStyles &&
-							! preferences.resetTemplates &&
-							! preferences.resetTemplateParts
-						}
-						onClick={ toggleConfirmDialog }
-					/>
-				</VStack>
-			</PanelBody>
+			<ScreenHeader title={ __( 'Reset Theme', 'create-block-theme' ) } />
+			<Card size="small" isBorderless>
+				<CardBody>
+					<VStack spacing={ 4 }>
+						<CheckboxControl
+							__nextHasNoMarginBottom
+							label={ __(
+								'Reset theme styles',
+								'create-block-theme'
+							) }
+							help={ __(
+								'Reset customizations to theme styles and settings.',
+								'create-block-theme'
+							) }
+							checked={ preferences.resetStyles }
+							onChange={ () =>
+								handleTogglePreference( 'resetStyles' )
+							}
+						/>
+						<CheckboxControl
+							__nextHasNoMarginBottom
+							label={ __(
+								'Reset theme templates',
+								'create-block-theme'
+							) }
+							help={ __(
+								'Reset customizations to theme templates.',
+								'create-block-theme'
+							) }
+							checked={ preferences.resetTemplates }
+							onChange={ () =>
+								handleTogglePreference( 'resetTemplates' )
+							}
+						/>
+						<CheckboxControl
+							__nextHasNoMarginBottom
+							label={ __(
+								'Reset theme template-parts',
+								'create-block-theme'
+							) }
+							help={ __(
+								'Reset customizations to theme template-parts.',
+								'create-block-theme'
+							) }
+							checked={ preferences.resetTemplateParts }
+							onChange={ () =>
+								handleTogglePreference( 'resetTemplateParts' )
+							}
+						/>
+						<Button
+							variant="primary"
+							icon={ trash }
+							disabled={
+								! preferences.resetStyles &&
+								! preferences.resetTemplates &&
+								! preferences.resetTemplateParts
+							}
+							onClick={ toggleConfirmDialog }
+						>
+							{ __( 'Reset Theme', 'create-block-theme' ) }
+						</Button>
+					</VStack>
+				</CardBody>
+			</Card>
 		</>
 	);
 }
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 (
-		<PanelBody>
+		<Card size="small" isBorderless>
 			<ScreenHeader
 				title={ __( 'Save Changes', 'create-block-theme' ) }
 			/>
-			<VStack spacing={ 4 }>
-				<CheckboxControl
-					__nextHasNoMarginBottom
-					label={ __( 'Save Fonts', 'create-block-theme' ) }
-					help={ __(
-						'Save activated fonts in the Font Library to the theme. Remove deactivated theme fonts from the theme.',
-						'create-block-theme'
-					) }
-					checked={ preference.saveFonts }
-					onChange={ () => handleTogglePreference( 'saveFonts' ) }
-				/>
-				<CheckboxControl
-					__nextHasNoMarginBottom
-					label={ __( 'Save Style Changes', 'create-block-theme' ) }
-					help={ __(
-						'Save Global Styles values set in the Editor to the theme.',
-						'create-block-theme'
-					) }
-					checked={ preference.saveStyle }
-					onChange={ () => handleTogglePreference( 'saveStyle' ) }
-				/>
-				<CheckboxControl
-					__nextHasNoMarginBottom
-					label={ __(
-						'Save Template Changes',
-						'create-block-theme'
-					) }
-					help={ __(
-						'Save Template and Template Part changes made in the Editor to the theme.',
-						'create-block-theme'
-					) }
-					checked={ preference.saveTemplates }
-					onChange={ () => handleTogglePreference( 'saveTemplates' ) }
-				/>
-				<CheckboxControl
-					__nextHasNoMarginBottom
-					label={ __(
-						'Process Only Modified Templates',
-						'create-block-theme'
-					) }
-					help={ __(
-						'Process only templates you have modified in the Editor. Any templates you have not modified will be left as is.',
-						'create-block-theme'
-					) }
-					disabled={ ! preference.saveTemplates }
-					checked={
-						preference.saveTemplates &&
-						preference.processOnlySavedTemplates
-					}
-					onChange={ () =>
-						handleTogglePreference( 'processOnlySavedTemplates' )
-					}
-				/>
-				<CheckboxControl
-					__nextHasNoMarginBottom
-					label={ __( 'Save Patterns', 'create-block-theme' ) }
-					help={ __(
-						'All patterns created in the Editor will be moved to the theme. Note that this will delete all patterns from the Editor and any references in templates will be made relative to the theme.',
-						'create-block-theme'
-					) }
-					checked={ preference.savePatterns }
-					onChange={ () => handleTogglePreference( 'savePatterns' ) }
-				/>
-				<CheckboxControl
-					__nextHasNoMarginBottom
-					label={ __( 'Localize Text', 'create-block-theme' ) }
-					help={ __(
-						'Any text in a template or pattern will be localized in a pattern.',
-						'create-block-theme'
-					) }
-					disabled={
-						! preference.saveTemplates && ! preference.savePatterns
-					}
-					checked={
-						( preference.saveTemplates ||
-							preference.savePatterns ) &&
-						preference.localizeText
-					}
-					onChange={ () => handleTogglePreference( 'localizeText' ) }
-				/>
-				<CheckboxControl
-					__nextHasNoMarginBottom
-					label={ __( 'Localize Images', 'create-block-theme' ) }
-					help={ __(
-						'Any images in a template or pattern will be copied to a local /assets folder and referenced from there via a pattern.',
-						'create-block-theme'
-					) }
-					disabled={
-						! preference.saveTemplates && ! preference.savePatterns
-					}
-					checked={
-						( preference.saveTemplates ||
-							preference.savePatterns ) &&
-						preference.localizeImages
-					}
-					onChange={ () =>
-						handleTogglePreference( 'localizeImages' )
-					}
-				/>
-				<CheckboxControl
-					__nextHasNoMarginBottom
-					label={ __(
-						'Remove Navigation Refs',
-						'create-block-theme'
-					) }
-					help={ __(
-						'Remove Navigation Refs from the theme returning your navigation to the default state.',
-						'create-block-theme'
-					) }
-					disabled={
-						! preference.saveTemplates && ! preference.savePatterns
-					}
-					checked={
-						( preference.saveTemplates ||
-							preference.savePatterns ) &&
-						preference.removeNavRefs
-					}
-					onChange={ () => handleTogglePreference( 'removeNavRefs' ) }
-				/>
-				<CheckboxControl
-					__nextHasNoMarginBottom
-					label={ __(
-						'Remove Taxonomy Query',
-						'create-block-theme'
-					) }
-					help={ __(
-						'Remove the taxonomy query from the query loop block attributes.',
-						'create-block-theme'
-					) }
-					disabled={
-						! preference.saveTemplates && ! preference.savePatterns
-					}
-					checked={ preference.removeTaxQuery }
-					onChange={ () =>
-						handleTogglePreference( 'removeTaxQuery' )
-					}
-				/>
-				<Button
-					variant="primary"
-					icon={ archive }
-					onClick={ handleSaveClick }
-				>
-					{ __( 'Save Changes', 'create-block-theme' ) }
-				</Button>
-			</VStack>
-		</PanelBody>
+			<CardBody>
+				<VStack spacing={ 4 }>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ __( 'Save Fonts', 'create-block-theme' ) }
+						help={ __(
+							'Save activated fonts in the Font Library to the theme. Remove deactivated theme fonts from the theme.',
+							'create-block-theme'
+						) }
+						checked={ preference.saveFonts }
+						onChange={ () => handleTogglePreference( 'saveFonts' ) }
+					/>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ __(
+							'Save Style Changes',
+							'create-block-theme'
+						) }
+						help={ __(
+							'Save Global Styles values set in the Editor to the theme.',
+							'create-block-theme'
+						) }
+						checked={ preference.saveStyle }
+						onChange={ () => handleTogglePreference( 'saveStyle' ) }
+					/>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ __(
+							'Save Template Changes',
+							'create-block-theme'
+						) }
+						help={ __(
+							'Save Template and Template Part changes made in the Editor to the theme.',
+							'create-block-theme'
+						) }
+						checked={ preference.saveTemplates }
+						onChange={ () =>
+							handleTogglePreference( 'saveTemplates' )
+						}
+					/>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ __(
+							'Process Only Modified Templates',
+							'create-block-theme'
+						) }
+						help={ __(
+							'Process only templates you have modified in the Editor. Any templates you have not modified will be left as is.',
+							'create-block-theme'
+						) }
+						disabled={ ! preference.saveTemplates }
+						checked={
+							preference.saveTemplates &&
+							preference.processOnlySavedTemplates
+						}
+						onChange={ () =>
+							handleTogglePreference(
+								'processOnlySavedTemplates'
+							)
+						}
+					/>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ __( 'Save Patterns', 'create-block-theme' ) }
+						help={ __(
+							'All patterns created in the Editor will be moved to the theme. Note that this will delete all patterns from the Editor and any references in templates will be made relative to the theme.',
+							'create-block-theme'
+						) }
+						checked={ preference.savePatterns }
+						onChange={ () =>
+							handleTogglePreference( 'savePatterns' )
+						}
+					/>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ __( 'Localize Text', 'create-block-theme' ) }
+						help={ __(
+							'Any text in a template or pattern will be localized in a pattern.',
+							'create-block-theme'
+						) }
+						disabled={
+							! preference.saveTemplates &&
+							! preference.savePatterns
+						}
+						checked={
+							( preference.saveTemplates ||
+								preference.savePatterns ) &&
+							preference.localizeText
+						}
+						onChange={ () =>
+							handleTogglePreference( 'localizeText' )
+						}
+					/>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ __( 'Localize Images', 'create-block-theme' ) }
+						help={ __(
+							'Any images in a template or pattern will be copied to a local /assets folder and referenced from there via a pattern.',
+							'create-block-theme'
+						) }
+						disabled={
+							! preference.saveTemplates &&
+							! preference.savePatterns
+						}
+						checked={
+							( preference.saveTemplates ||
+								preference.savePatterns ) &&
+							preference.localizeImages
+						}
+						onChange={ () =>
+							handleTogglePreference( 'localizeImages' )
+						}
+					/>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ __(
+							'Remove Navigation Refs',
+							'create-block-theme'
+						) }
+						help={ __(
+							'Remove Navigation Refs from the theme returning your navigation to the default state.',
+							'create-block-theme'
+						) }
+						disabled={
+							! preference.saveTemplates &&
+							! preference.savePatterns
+						}
+						checked={
+							( preference.saveTemplates ||
+								preference.savePatterns ) &&
+							preference.removeNavRefs
+						}
+						onChange={ () =>
+							handleTogglePreference( 'removeNavRefs' )
+						}
+					/>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ __(
+							'Remove Taxonomy Query',
+							'create-block-theme'
+						) }
+						help={ __(
+							'Remove the taxonomy query from the query loop block attributes.',
+							'create-block-theme'
+						) }
+						disabled={
+							! preference.saveTemplates &&
+							! preference.savePatterns
+						}
+						checked={ preference.removeTaxQuery }
+						onChange={ () =>
+							handleTogglePreference( 'removeTaxQuery' )
+						}
+					/>
+					<Button
+						variant="primary"
+						icon={ archive }
+						onClick={ handleSaveClick }
+					>
+						{ __( 'Save Changes', 'create-block-theme' ) }
+					</Button>
+				</VStack>
+			</CardBody>
+		</Card>
 	);
 };
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 (
-		<Spacer marginBottom={ 0 } paddingBottom={ 4 }>
-			<HStack spacing={ 2 }>
-				<BackButton
-					style={ { minWidth: 24, padding: 0 } }
-					icon={ isRTL() ? chevronRight : chevronLeft }
-					size="small"
-					label={ __( 'Back', 'create-block-theme' ) }
-					onClick={ onBack }
-				/>
-				<Spacer>
-					<Heading
-						level={ 2 }
-						size={ 13 }
-						// Need to override the too specific bottom margin for complementary areas.
-						style={ { margin: 0 } }
-					>
-						{ title }
-					</Heading>
-				</Spacer>
-			</HStack>
+		<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
+			<VStack>
+				<HStack spacing={ 2 }>
+					<BackButton
+						style={ { minWidth: 24, padding: 0 } }
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						size="small"
+						label={ __( 'Back', 'create-block-theme' ) }
+						onClick={ onBack }
+					/>
+					<Spacer>
+						<Heading
+							level={ 2 }
+							size={ 13 }
+							// Need to override the too specific bottom margin for complementary areas.
+							style={ { margin: 0 } }
+						>
+							{ title }
+						</Heading>
+					</Spacer>
+				</HStack>
+				{ description }
+			</VStack>
 		</Spacer>
 	);
 };
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 (
-		<ItemWrapper { ...props } path={ path }>
+		<ItemWrapper onClick={ onClick } path={ path }>
 			<HStack justify="flex-start">
 				<HStack justify="flex-start">
 					<Icon icon={ icon } />
@@ -123,153 +122,188 @@ const CreateBlockThemePlugin = () => {
 					'UI String',
 					'create-block-theme'
 				) }
+				className="create-block-theme-sidebar"
 			>
 				<NavigatorProvider initialPath="/">
 					<NavigatorScreen path="/">
-						<PanelBody>
-							<VStack spacing={ 0 }>
-								<PluginSidebarItem path="/save" icon={ copy }>
-									{ __(
-										'Save Changes to Theme',
-										'create-block-theme'
-									) }
-								</PluginSidebarItem>
-								<PluginSidebarItem
-									path="/create/variation"
-									icon={ blockMeta }
-								>
-									{ __(
-										'Create Theme Variation',
-										'create-block-theme'
-									) }
-								</PluginSidebarItem>
-								<PluginSidebarItem
-									icon={ edit }
-									onClick={ () =>
-										setIsMetadataEditorOpen( true )
-									}
-								>
-									{ __(
-										'Edit Theme Metadata',
-										'create-block-theme'
-									) }
-								</PluginSidebarItem>
-								<PluginSidebarItem
-									icon={ code }
-									onClick={ () => setIsEditorOpen( true ) }
-								>
-									{ __(
-										'View theme.json',
-										'create-block-theme'
-									) }
-								</PluginSidebarItem>
-								<PluginSidebarItem
-									icon={ code }
-									onClick={ () =>
-										setIsGlobalStylesEditorOpen( true )
-									}
-								>
-									{ __(
-										'View Custom Styles',
-										'create-block-theme'
-									) }
-								</PluginSidebarItem>
-								<PluginSidebarItem
-									icon={ download }
-									onClick={ () => handleExportClick() }
-								>
-									{ __( 'Export Zip', 'create-block-theme' ) }
-								</PluginSidebarItem>
-								<Divider />
-								<PluginSidebarItem
-									path="/create/blank"
-									icon={ addCard }
-								>
-									{ __(
-										'Create Blank Theme',
-										'create-block-theme'
-									) }
-								</PluginSidebarItem>
-								<PluginSidebarItem path="/clone" icon={ copy }>
-									{ __(
-										'Create Theme',
-										'create-block-theme'
-									) }
-								</PluginSidebarItem>
-
-								<Divider />
-
-								<PluginSidebarItem path="/reset" icon={ trash }>
-									{ __(
-										'Reset Theme',
-										'create-block-theme'
-									) }
-								</PluginSidebarItem>
-
-								<Divider />
-
-								<PluginSidebarItem path="/about" icon={ help }>
-									{ __( 'Help', 'create-block-theme' ) }
-								</PluginSidebarItem>
-							</VStack>
-						</PanelBody>
+						<Card size="small" isBorderless>
+							<CardBody>
+								<VStack spacing={ 0 }>
+									<PluginSidebarItem
+										path="/save"
+										icon={ copy }
+									>
+										{ __(
+											'Save Changes to Theme',
+											'create-block-theme'
+										) }
+									</PluginSidebarItem>
+									<PluginSidebarItem
+										path="/create/variation"
+										icon={ blockMeta }
+									>
+										{ __(
+											'Create Theme Variation',
+											'create-block-theme'
+										) }
+									</PluginSidebarItem>
+									<PluginSidebarItem
+										icon={ edit }
+										onClick={ () =>
+											setIsMetadataEditorOpen( true )
+										}
+									>
+										{ __(
+											'Edit Theme Metadata',
+											'create-block-theme'
+										) }
+									</PluginSidebarItem>
+									<PluginSidebarItem
+										icon={ code }
+										onClick={ () =>
+											setIsEditorOpen( true )
+										}
+									>
+										{ __(
+											'View theme.json',
+											'create-block-theme'
+										) }
+									</PluginSidebarItem>
+									<PluginSidebarItem
+										icon={ code }
+										onClick={ () =>
+											setIsGlobalStylesEditorOpen( true )
+										}
+									>
+										{ __(
+											'View Custom Styles',
+											'create-block-theme'
+										) }
+									</PluginSidebarItem>
+									<PluginSidebarItem
+										icon={ download }
+										onClick={ () => handleExportClick() }
+									>
+										{ __(
+											'Export Zip',
+											'create-block-theme'
+										) }
+									</PluginSidebarItem>
+								</VStack>
+							</CardBody>
+							<CardDivider />
+							<CardBody>
+								<VStack spacing={ 0 }>
+									<PluginSidebarItem
+										path="/create/blank"
+										icon={ addCard }
+									>
+										{ __(
+											'Create Blank Theme',
+											'create-block-theme'
+										) }
+									</PluginSidebarItem>
+									<PluginSidebarItem
+										path="/clone"
+										icon={ copy }
+									>
+										{ __(
+											'Create Theme',
+											'create-block-theme'
+										) }
+									</PluginSidebarItem>
+								</VStack>
+							</CardBody>
+							<CardDivider />
+							<CardBody>
+								<VStack spacing={ 0 }>
+									<PluginSidebarItem
+										path="/reset"
+										icon={ trash }
+									>
+										{ __(
+											'Reset Theme',
+											'create-block-theme'
+										) }
+									</PluginSidebarItem>
+								</VStack>
+							</CardBody>
+							<CardDivider />
+							<CardBody>
+								<VStack spacing={ 0 }>
+									<PluginSidebarItem
+										path="/about"
+										icon={ help }
+									>
+										{ __( 'Help', 'create-block-theme' ) }
+									</PluginSidebarItem>
+								</VStack>
+							</CardBody>
+						</Card>
 					</NavigatorScreen>
 
 					<NavigatorScreen path="/clone">
-						<PanelBody>
-							<ScreenHeader
-								title={ __(
-									'Create Block Theme',
-									'create-block-theme'
-								) }
-							/>
-							<VStack>
+						<ScreenHeader
+							title={ __(
+								'Create Block Theme',
+								'create-block-theme'
+							) }
+							description={
 								<Text>
 									{ __(
 										'Would you like to clone this Theme or create a Child Theme?',
 										'create-block-theme'
 									) }
 								</Text>
-								<Divider />
-								<PluginSidebarItem
-									path="/clone/create"
-									icon={ copy }
-									onClick={ () => {
-										setCloneCreateType( 'createClone' );
-									} }
-								>
-									{ __(
-										'Clone Theme',
-										'create-block-theme'
-									) }
-								</PluginSidebarItem>
-								<Text variant="muted">
-									{ __(
-										'Create a clone of this theme with a new name. The user changes will be preserved in the new theme.',
-										'create-block-theme'
-									) }
-								</Text>
-								<Divider />
-								<PluginSidebarItem
-									path="/clone/create"
-									icon={ copy }
-									onClick={ () => {
-										setCloneCreateType( 'createChild' );
-									} }
-								>
-									{ __(
-										'Create Child Theme',
-										'create-block-theme'
-									) }
-								</PluginSidebarItem>
-								<Text variant="muted">
-									{ __(
-										'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'
-									) }
-								</Text>
-							</VStack>
-						</PanelBody>
+							}
+						/>
+						<Card size="small" isBorderless>
+							<CardBody>
+								<VStack>
+									<PluginSidebarItem
+										path="/clone/create"
+										icon={ copy }
+										onClick={ () => {
+											setCloneCreateType( 'createClone' );
+										} }
+									>
+										{ __(
+											'Clone Theme',
+											'create-block-theme'
+										) }
+									</PluginSidebarItem>
+									<Text variant="muted">
+										{ __(
+											'Create a clone of this theme with a new name. The user changes will be preserved in the new theme.',
+											'create-block-theme'
+										) }
+									</Text>
+								</VStack>
+							</CardBody>
+							<CardDivider />
+							<CardBody>
+								<VStack>
+									<PluginSidebarItem
+										path="/clone/create"
+										icon={ copy }
+										onClick={ () => {
+											setCloneCreateType( 'createChild' );
+										} }
+									>
+										{ __(
+											'Create Child Theme',
+											'create-block-theme'
+										) }
+									</PluginSidebarItem>
+									<Text variant="muted">
+										{ __(
+											'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'
+										) }
+									</Text>
+								</VStack>
+							</CardBody>
+						</Card>
 					</NavigatorScreen>
 
 					<NavigatorScreen path="/create/blank">
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;
+}
+