diff --git a/src/editor.scss b/src/editor.scss index 56de166..905d976 100644 --- 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 index 0e29ff2..d97e66d 100644 --- 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={ } > - +
{ createInterpolateElement( isAppleOS() ? __( @@ -109,12 +118,18 @@ export default function TablePlaceholder( { setAttributes }: Props ) { ), { code: } ) } - -
+ -
{ __( 'Preview', 'flexible-table-block' ) }
+ + { __( 'Preview', 'flexible-table-block' ) } + { rowCount && colCount && ( { headerSection && ( @@ -154,9 +169,9 @@ export default function TablePlaceholder( { setAttributes }: Props ) { ) }
) } -
-
-
+ + + -
-
+ + { __( 'Create Table', 'flexible-table-block' ) } -
-
+ + ); }