Refactor Table Placeholder with wordpress components

t-hamano · Oct 20, 2024 · 52c3a4a · 52c3a4a
1 parent a9a66df
commit 52c3a4a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 43 deletions.
diff --git a/src/editor.scss b/src/editor.scss
@@ -105,7 +105,6 @@
 
 	.ftb-placeholder {
 		// Reset typography support styles
-		padding: 16px;
 		font-style: normal;
 		font-weight: normal;
 		line-height: initial;
@@ -123,21 +122,13 @@
 
 	.ftb-placeholder__table-wrap {
 		width: 100%;
-		padding: 12px 24px 16px;
 		background-color: #eaeaea;
-	}
-
-	.ftb-placeholder__tbl-ttl {
-		margin-bottom: 8px;
-		font-size: 16px;
-		font-weight: bold;
-		text-align: center;
+		box-sizing: border-box;
 	}
 
 	.ftb-placeholder__table {
 		width: 100%;
 		max-width: 330px;
-		margin: 0 auto;
 		vertical-align: middle;
 		table-layout: fixed;
 		border-spacing: 3px;
@@ -190,27 +181,8 @@
 		}
 	}
 
-	.ftb-placeholder__form {
-		display: block !important;
-		flex-wrap: nowrap;
-
-		.components-base-control {
-			width: 100px;
-
-			&.components-toggle-control {
-				width: auto;
-			}
-		}
-
-		.components-base-control__field {
-			margin-right: 8px;
-		}
-	}
-
-	.ftb-placeholder__row {
-		display: flex;
-		align-items: flex-end;
-		margin-top: 16px;
+	.ftb-placeholder__input {
+		width: 112px;
 	}
 
 	.ftb-table-cell-label {

diff --git a/src/elements/table-placeholder.tsx b/src/elements/table-placeholder.tsx
@@ -10,7 +10,16 @@ import type { FormEvent } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useState, createInterpolateElement } from '@wordpress/element';
 import { BlockIcon } from '@wordpress/block-editor';
-import { Button, Placeholder, TextControl, ToggleControl } from '@wordpress/components';
+import {
+	Button,
+	Placeholder,
+	TextControl,
+	ToggleControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import { isAppleOS } from '@wordpress/keycodes';
 
 /**
@@ -96,7 +105,7 @@ export default function TablePlaceholder( { setAttributes }: Props ) {
 			className="ftb-placeholder"
 			icon={ <BlockIcon icon={ icon } showColors /> }
 		>
-			<legend className="components-placeholder__instructions">
+			<div className="components-placeholder__instructions">
 				{ createInterpolateElement(
 					isAppleOS()
 						? __(
@@ -109,12 +118,18 @@ export default function TablePlaceholder( { setAttributes }: Props ) {
 						  ),
 					{ code: <code /> }
 				) }
-			</legend>
-			<div
+			</div>
+			<Spacer
+				as={ VStack }
 				className="ftb-placeholder__table-wrap"
 				style={ { minHeight: MIN_PREVIEW_TABLE_HEIGHT } }
+				alignment="center"
+				padding={ 4 }
+				marginBottom={ 0 }
 			>
-				<div className="ftb-placeholder__tbl-ttl">{ __( 'Preview', 'flexible-table-block' ) }</div>
+				<Text align="center" isBlock weight="500">
+					{ __( 'Preview', 'flexible-table-block' ) }
+				</Text>
 				{ rowCount && colCount && (
 					<table className={ tableClasses }>
 						{ headerSection && (
@@ -154,9 +169,9 @@ export default function TablePlaceholder( { setAttributes }: Props ) {
 						) }
 					</table>
 				) }
-			</div>
-			<form className="ftb-placeholder__form" onSubmit={ onCreateTable }>
-				<div className="ftb-placeholder__row">
+			</Spacer>
+			<VStack as="form" onSubmit={ onCreateTable }>
+				<HStack wrap justify="start">
 					<ToggleControl
 						label={ __( 'Header section', 'flexible-table-block' ) }
 						checked={ !! headerSection }
@@ -169,10 +184,11 @@ export default function TablePlaceholder( { setAttributes }: Props ) {
 						onChange={ onToggleFooterSection }
 						__nextHasNoMarginBottom
 					/>
-				</div>
-				<div className="ftb-placeholder__row">
+				</HStack>
+				<HStack wrap alignment="end" justify="start">
 					<TextControl
 						label={ __( 'Column count', 'flexible-table-block' ) }
+						className="ftb-placeholder__input"
 						type="number"
 						min="1"
 						max={ MAX_PREVIEW_TABLE_COL }
@@ -183,6 +199,7 @@ export default function TablePlaceholder( { setAttributes }: Props ) {
 					/>
 					<TextControl
 						label={ __( 'Row count', 'flexible-table-block' ) }
+						className="ftb-placeholder__input"
 						type="number"
 						min="1"
 						max={ MAX_PREVIEW_TABLE_ROW }
@@ -199,8 +216,8 @@ export default function TablePlaceholder( { setAttributes }: Props ) {
 					>
 						{ __( 'Create Table', 'flexible-table-block' ) }
 					</Button>
-				</div>
-			</form>
+				</HStack>
+			</VStack>
 		</Placeholder>
 	);
 }