Polish styles and layouts

t-hamano · Oct 15, 2024 · dd13a4e · dd13a4e
1 parent cc2c6f2
commit dd13a4e
Show file tree

Hide file tree

Showing 130 changed files with 1,194 additions and 1,359 deletions.
diff --git a/classes/class-classic-editor.php b/classes/class-classic-editor.php
@@ -153,7 +153,7 @@ public function admin_footer() {
 				<div class="chbe-dialog__setting">
 					<h3 class="chbe-dialog__subtitle"><?php esc_html_e( 'Current Indent', 'custom-html-block-extension' ); ?></h3>
 					<fieldset>
-						<legend><?php esc_html_e( 'Current indent type', 'custom-html-block-extension' ); ?></legend>
+						<legend><?php esc_html_e( 'Indent type', 'custom-html-block-extension' ); ?></legend>
 						<label>
 							<?php esc_html_e( 'Space', 'custom-html-block-extension' ); ?>
 							<input type="radio" name="before_insert_spaces" value="1" <?php checked( $settings['insertSpaces'] ); ?>>
@@ -164,15 +164,15 @@ public function admin_footer() {
 						</label>
 					</fieldset>
 					<p id="chbe-item-before-tab-size" style="<?php if ( ! $settings['insertSpaces'] ) echo 'display:none;'; ?>">
-						<label for="chbe_before_tab_size"><strong><?php esc_html_e( 'Current indent width', 'custom-html-block-extension' ); ?></strong></label>
+						<label for="chbe_before_tab_size"><strong><?php esc_html_e( 'Indent width', 'custom-html-block-extension' ); ?></strong></label>
 						<input type="number" id="chbe_before_tab_size" name="before_tab_size" min="1" max="8" value="<?php echo esc_attr( $settings['tabSize'] ); ?>">
 					</p>
 				</div>
 				<span class="chbe-dialog__arrow dashicons dashicons-arrow-right-alt"></span>
 				<div class="chbe-dialog__setting">
 					<h3 class="chbe-dialog__subtitle"><?php esc_html_e( 'New Indent', 'custom-html-block-extension' ); ?></h3>
 					<fieldset>
-						<legend><?php esc_html_e( 'New indent type', 'custom-html-block-extension' ); ?></legend>
+						<legend><?php esc_html_e( 'Indent type', 'custom-html-block-extension' ); ?></legend>
 						<label>
 							<?php esc_html_e( 'Space', 'custom-html-block-extension' ); ?>
 							<input type="radio" name="after_insert_spaces" value="1" <?php checked( $settings['insertSpaces'] ); ?>>
@@ -183,7 +183,7 @@ public function admin_footer() {
 						</label>
 					</fieldset>
 					<p id="chbe-item-after-tab-size" style="<?php if ( ! $settings['insertSpaces'] ) echo 'display:none;'; ?>">
-						<label for="chbe_after_tab_size"><strong><?php esc_html_e( 'New indent width', 'custom-html-block-extension' ); ?></strong></label>
+						<label for="chbe_after_tab_size"><strong><?php esc_html_e( 'Indent width', 'custom-html-block-extension' ); ?></strong></label>
 						<input type="number" id="chbe_after_tab_size" name="after_tab_size" min="1" max="8" value="<?php echo esc_attr( $settings['tabSize'] ); ?>">
 					</p>
 				</div>

diff --git a/src/admin/components/header/index.js b/src/admin/components/header/index.js
@@ -2,6 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	Icon,
+	__experimentalHeading as Heading,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,18 +20,16 @@ export default function Header() {
 	return (
 		<header className="chbe-admin-header">
 			<div className="chbe-admin-container">
-				<h1 className="chbe-admin-header__title">
-					{ BlockIcon }
-					{ __( 'Custom HTML Block Extension', 'custom-html-block-extension' ) }
-				</h1>
-				<ul className="chbe-admin-header__info">
-					<li className="chbe-admin-header__info-item">
-						<WelcomeGuide />
-					</li>
-					<li className="chbe-admin-header__info-item">
-						<Shortcut />
-					</li>
-				</ul>
+				<Heading as="h1" justify="center">
+					<HStack justify="center">
+						<Icon icon={ BlockIcon } size={ 32 } />
+						<span>{ __( 'Custom HTML Block Extension', 'custom-html-block-extension' ) }</span>
+					</HStack>
+				</Heading>
+				<VStack className="chbe-admin-header__info">
+					<WelcomeGuide />
+					<Shortcut />
+				</VStack>
 			</div>
 		</header>
 	);

diff --git a/src/admin/components/header/style.scss b/src/admin/components/header/style.scss
@@ -1,29 +1,11 @@
 .chbe-admin-header {
-	padding: $grid-unit-20 0 $grid-unit-10;
+	padding: $grid-unit-20 0;
 	background-color: $white;
 
-	.chbe-admin-header__title {
-		display: flex;
-		gap: $grid-unit-20;
-		align-items: center;
-		justify-content: center;
-		margin: 0 0 $grid-unit-10;
-		line-height: 1;
-
-		@media screen and (max-width: 782px) {
-			font-size: 20px;
-		}
-
-		svg {
-			width: $grid-unit-40;
-		}
-	}
-
 	.chbe-admin-header__info {
 		position: absolute;
 		top: 0;
 		right: $grid-unit-20;
-		margin: 0;
 
 		@media screen and (max-width: 782px) {
 			position: static;

diff --git a/src/admin/components/shortcut/index.js b/src/admin/components/shortcut/index.js
@@ -12,7 +12,6 @@ export default function Shortcut() {
 	return (
 		<>
 			<Button
-				className="chbe-admin-shortcut-toggle"
 				variant="tertiary"
 				size="small"
 				icon={ info }

diff --git a/src/admin/components/shortcut/style.scss b/src/admin/components/shortcut/style.scss
@@ -1,7 +1,7 @@
 .chbe-admin-shortcut-modal {
 
 	p {
-		margin: 0 0 $grid-unit-20 0;
+		margin: 0 0 $grid-unit-20;
 	}
 
 	ul {

diff --git a/src/admin/components/welcome-guide/index.js b/src/admin/components/welcome-guide/index.js
@@ -5,7 +5,12 @@ import { __, sprintf } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { useState, useEffect } from '@wordpress/element';
 import { info } from '@wordpress/icons';
-import { Button, Guide } from '@wordpress/components';
+import {
+	Button,
+	Guide,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
 
 export default function WelcomeGuide() {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
@@ -51,17 +56,18 @@ export default function WelcomeGuide() {
 						{
 							image: (
 								<img
+									className="chbe-admin-welcome-guide-modal__image"
 									src={
 										window.chbeObj.pluginUrl + '/assets/images/admin/welcome-guide/slide_1.gif'
 									}
 									alt={ __( 'About Custom HTML Block Extension', 'custom-html-block-extension' ) }
 								/>
 							),
 							content: (
-								<>
-									<h1>
+								<Spacer paddingX={ 8 } paddingTop={ 4 } marginBottom={ 0 }>
+									<Heading level="2" as="h1">
 										{ __( 'About Custom HTML Block Extension', 'custom-html-block-extension' ) }
-									</h1>
+									</Heading>
 									<p>
 										{ sprintf(
 											/* translators: %s is replaced with the number. */
@@ -75,91 +81,103 @@ export default function WelcomeGuide() {
 											'custom-html-block-extension'
 										) }
 									</p>
-								</>
+								</Spacer>
 							),
 						},
 						{
 							image: (
 								<img
+									className="chbe-admin-welcome-guide-modal__image"
 									src={
 										window.chbeObj.pluginUrl + '/assets/images/admin/welcome-guide/slide_2.gif'
 									}
 									alt={ __( 'Various color themes', 'custom-html-block-extension' ) }
 								/>
 							),
 							content: (
-								<>
-									<h1>{ __( 'Various color themes', 'custom-html-block-extension' ) }</h1>
+								<Spacer paddingX={ 8 } paddingTop={ 4 } marginBottom={ 0 }>
+									<Heading level="2" as="h1">
+										{ __( 'Various color themes', 'custom-html-block-extension' ) }
+									</Heading>
 									<p>
 										{ __(
 											'There are 50 different color themes to choose from, and you can select the one that best suits your taste.',
 											'custom-html-block-extension'
 										) }
 									</p>
-								</>
+								</Spacer>
 							),
 						},
 						{
 							image: (
 								<img
+									className="chbe-admin-welcome-guide-modal__image"
 									src={
 										window.chbeObj.pluginUrl + '/assets/images/admin/welcome-guide/slide_3.gif'
 									}
 									alt={ __( 'Faster coding with Emmet', 'custom-html-block-extension' ) }
 								/>
 							),
 							content: (
-								<>
-									<h1>{ __( 'Faster coding with Emmet', 'custom-html-block-extension' ) }</h1>
+								<Spacer paddingX={ 8 } paddingTop={ 4 } marginBottom={ 0 }>
+									<Heading level="2" as="h1">
+										{ __( 'Faster coding with Emmet', 'custom-html-block-extension' ) }
+									</Heading>
 									<p>
 										{ __(
 											'Emmet allows you to type shortcuts that are then expanded into full pieces of code. Type less, saving both keystrokes.',
 											'custom-html-block-extension'
 										) }
 									</p>
-								</>
+								</Spacer>
 							),
 						},
 						{
 							image: (
 								<img
+									className="chbe-admin-welcome-guide-modal__image"
 									src={
 										window.chbeObj.pluginUrl + '/assets/images/admin/welcome-guide/slide_4.jpg'
 									}
 									alt={ __( 'High customizability', 'custom-html-block-extension' ) }
 								/>
 							),
 							content: (
-								<>
-									<h1>{ __( 'High customizability', 'custom-html-block-extension' ) }</h1>
+								<Spacer paddingX={ 8 } paddingTop={ 4 } marginBottom={ 0 }>
+									<Heading level="2" as="h1">
+										{ __( 'High customizability', 'custom-html-block-extension' ) }
+									</Heading>
 									<p>
 										{ __(
 											'You can change all kinds of settings to create your ideal editor in advanced mode.',
 											'custom-html-block-extension'
 										) }
 									</p>
-								</>
+								</Spacer>
 							),
 						},
 						{
 							image: (
 								<img
+									className="chbe-admin-welcome-guide-modal__image"
 									src={
 										window.chbeObj.pluginUrl + '/assets/images/admin/welcome-guide/slide_5.jpg'
 									}
 									alt={ __( 'More support', 'custom-html-block-extension' ) }
 								/>
 							),
 							content: (
-								<>
-									<h1>{ __( 'More support', 'custom-html-block-extension' ) }</h1>
+								<Spacer paddingX={ 8 } paddingTop={ 4 } marginBottom={ 0 }>
+									<Heading level="2" as="h1">
+										{ __( 'More support', 'custom-html-block-extension' ) }
+									</Heading>
 									<p>
 										{ __(
 											'Supports the classic editor, the theme/plugin editor, import/export editor settings, and change indentation.',
 											'custom-html-block-extension'
 										) }
 									</p>
-								</>
+								</Spacer>
 							),
 						},
 					] }

diff --git a/src/admin/components/welcome-guide/style.scss b/src/admin/components/welcome-guide/style.scss
@@ -1,21 +1,7 @@
 .chbe-admin-welcome-guide-modal {
-	max-width: 350px;
+	width: 312px;
 
-	h1 {
-		padding: 0 $grid-unit-40;
-		margin: 0 0 $grid-unit-20 0;
-		font-size: 24px;
-		line-height: 1.4;
-	}
-
-	p {
-		padding: 0 $grid-unit-40;
-		margin: 0 0 $grid-unit-30 0;
-		font-size: 13px;
-		line-height: 1.4;
-	}
-
-	.components-guide__footer {
-		box-sizing: border-box;
+	.chbe-admin-welcome-guide-modal__image {
+		margin-bottom: $grid-unit-20;
 	}
 }
diff --git a/src/admin/editor-config/components/controls/index.js b/src/admin/editor-config/components/controls/index.js
@@ -3,37 +3,35 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { Button, __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import {
+	Button,
+	__experimentalConfirmDialog as ConfirmDialog,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 
 export default function Controls( { isWaiting, onUpdateOptions, onResetOptions } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
 	return (
 		<>
-			<ul className="chbe-admin-editor-config-controls">
-				<li className="chbe-admin-editor-config-controls__item">
-					<Button
-						className="chbe-admin-editor-config-controls__submit"
-						variant="primary"
-						disabled={ isWaiting }
-						onClick={ onUpdateOptions }
-						__next40pxDefaultSize
-					>
-						{ __( 'Save settings', 'custom-html-block-extension' ) }
-					</Button>
-				</li>
-				<li className="chbe-admin-editor-config-controls__item">
-					<Button
-						className="chbe-admin-editor-config-controls__reset"
-						variant="secondary"
-						disabled={ isWaiting }
-						onClick={ () => setIsModalOpen( true ) }
-						__next40pxDefaultSize
-					>
-						{ __( 'Reset', 'custom-html-block-extension' ) }
-					</Button>
-				</li>
-			</ul>
+			<HStack>
+				<Button
+					variant="primary"
+					disabled={ isWaiting }
+					onClick={ onUpdateOptions }
+					__next40pxDefaultSize
+				>
+					{ __( 'Save settings', 'custom-html-block-extension' ) }
+				</Button>
+				<Button
+					variant="secondary"
+					disabled={ isWaiting }
+					onClick={ () => setIsModalOpen( true ) }
+					__next40pxDefaultSize
+				>
+					{ __( 'Reset', 'custom-html-block-extension' ) }
+				</Button>
+			</HStack>
 			{ isModalOpen && (
 				<ConfirmDialog
 					onConfirm={ () => {

diff --git a/src/admin/editor-config/components/controls/style.scss b/src/admin/editor-config/components/controls/style.scss