WIP

t-hamano · Oct 14, 2024 · f02794c · f02794c
1 parent 3eef30f
commit f02794c
Show file tree

Hide file tree

Showing 100 changed files with 610 additions and 629 deletions.
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/editor-config/components/item-help/index.js b/src/admin/editor-config/components/item-help/index.js
@@ -96,6 +96,7 @@ export default function ItemHelp( {
 									onChange( newValue );
 									setIsModalOpen( false );
 								} }
+								label={ title }
 							/>
 						) }
 					</VStack>

diff --git a/src/admin/editor-config/editor-options/accept-suggestion-on-enter.js b/src/admin/editor-config/editor-options/accept-suggestion-on-enter.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useContext } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ export default function AcceptSuggestionOnEnter() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<ToggleControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -54,6 +54,6 @@ export default function AcceptSuggestionOnEnter() {
 				defaultToggle
 				value={ editorOptions.acceptSuggestionOnEnter }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/auto-closing-brackets.js b/src/admin/editor-config/editor-options/auto-closing-brackets.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
+import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -53,7 +53,7 @@ export default function AutoClosingBrackets() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<SelectControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -70,6 +70,6 @@ export default function AutoClosingBrackets() {
 				colCount="3"
 				value={ editorOptions.autoClosingBrackets }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/auto-closing-quotes.js b/src/admin/editor-config/editor-options/auto-closing-quotes.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
+import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -53,7 +53,7 @@ export default function AutoClosingQuotes() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<SelectControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -70,6 +70,6 @@ export default function AutoClosingQuotes() {
 				colCount="3"
 				value={ editorOptions.autoClosingQuotes }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/auto-indent.js b/src/admin/editor-config/editor-options/auto-indent.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
+import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -51,7 +51,7 @@ export default function AutoIndent() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<SelectControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -68,6 +68,6 @@ export default function AutoIndent() {
 				colCount="3"
 				value={ editorOptions.autoIndent }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/auto-surround.js b/src/admin/editor-config/editor-options/auto-surround.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
+import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -58,7 +58,7 @@ export default function AutoSurround() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<SelectControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -74,6 +74,6 @@ export default function AutoSurround() {
 				items={ items }
 				value={ editorOptions.autoSurround }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/column-selection.js b/src/admin/editor-config/editor-options/column-selection.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useContext } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ export default function ColumnSelection() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<ToggleControl
 				__nextHasNoMarginBottom
 				label={ __( 'Enable column selection', 'custom-html-block-extension' ) }
@@ -80,6 +80,6 @@ export default function ColumnSelection() {
 				image="editor-options/column-selection.gif"
 				value={ editorOptions.columnSelection }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/comments/insert-space.js b/src/admin/editor-config/editor-options/comments/insert-space.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -34,7 +34,7 @@ export default function CommentsInsertSpace() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<ToggleControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -63,6 +63,6 @@ export default function CommentsInsertSpace() {
 				] }
 				value={ editorOptions.comments.insertSpace }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/contextmenu.js b/src/admin/editor-config/editor-options/contextmenu.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ export default function Contextmenu() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<ToggleControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -62,6 +62,6 @@ export default function Contextmenu() {
 				] }
 				value={ editorOptions.contextmenu }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/copy-with-syntax-highlighting.js b/src/admin/editor-config/editor-options/copy-with-syntax-highlighting.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ export default function CopyWithSyntaxHighlighting() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<ToggleControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -60,6 +60,6 @@ export default function CopyWithSyntaxHighlighting() {
 				] }
 				value={ editorOptions.copyWithSyntaxHighlighting }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/cursor-blinking.js b/src/admin/editor-config/editor-options/cursor-blinking.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
+import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -60,7 +60,7 @@ export default function CursorBlinking() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<SelectControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -77,6 +77,6 @@ export default function CursorBlinking() {
 				colCount="5"
 				value={ editorOptions.cursorBlinking }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/cursor-smooth-caret-animation.js b/src/admin/editor-config/editor-options/cursor-smooth-caret-animation.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ export default function CursorSmoothCaretAnimation() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<ToggleControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -56,6 +56,6 @@ export default function CursorSmoothCaretAnimation() {
 				] }
 				value={ editorOptions.cursorSmoothCaretAnimation }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/cursor-style.js b/src/admin/editor-config/editor-options/cursor-style.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
+import { SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -65,7 +65,7 @@ export default function CursorStyle() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<SelectControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -82,6 +82,6 @@ export default function CursorStyle() {
 				colCount="3"
 				value={ editorOptions.cursorStyle }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/cursor-surrounding-lines-style.js b/src/admin/editor-config/editor-options/cursor-surrounding-lines-style.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -34,7 +34,7 @@ export default function CursorSurroundingLinesStyle() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<ToggleControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -63,6 +63,6 @@ export default function CursorSurroundingLinesStyle() {
 				] }
 				value={ 'all' === editorOptions.cursorSurroundingLinesStyle }
 			/>
-		</div>
+		</HStack>
 	);
 }
diff --git a/src/admin/editor-config/editor-options/cursor-surrounding-lines.js b/src/admin/editor-config/editor-options/cursor-surrounding-lines.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { RangeControl } from '@wordpress/components';
+import { RangeControl, __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -35,7 +35,7 @@ export default function CursorSurroundingLines() {
 	};
 
 	return (
-		<div className="chbe-admin-editor-config__item">
+		<HStack justify="start" align="start" wrap>
 			<RangeControl
 				__nextHasNoMarginBottom
 				label={ title }
@@ -74,6 +74,6 @@ export default function CursorSurroundingLines() {
 				] }
 				value={ editorOptions.cursorSurroundingLines }
 			/>
-		</div>
+		</HStack>
 	);
 }