Merge pull request #144 from t-hamano/fix/toolbar-control

Fix some issues and improve the development environment

.distignore

@@ -21,5 +21,4 @@ package.json
 phpcs.ruleset.xml
 README.md
 tsconfig.json
-webpack.config.js
 *.tsbuildinfo

package.json

@@ -19,37 +19,37 @@
 		"test:unit": "wp-scripts test-unit-js --config test/unit/jest.config.js"
 	},
 	"devDependencies": {
-		"@types/jest": "^27.5.1",
+		"@types/jest": "^29.0.0",
 		"@types/puppeteer": "^5.4.6",
 		"@types/wordpress__block-editor": "^7.0.0",
-		"@types/wordpress__blocks": "^11.0.1",
+		"@types/wordpress__blocks": "^11.0.7",
 		"@types/wordpress__core-data": "^2.4.5",
-		"@types/wordpress__data": "^6.0.0",
-		"@typescript-eslint/eslint-plugin": "^5.28.0",
-		"@typescript-eslint/parser": "^5.28.0",
-		"@wordpress/e2e-test-utils": "^7.7.0",
-		"@wordpress/env": "^4.9.0",
-		"@wordpress/jest-preset-default": "^8.4.0",
-		"@wordpress/jest-puppeteer-axe": "^4.0.2",
-		"@wordpress/scripts": "^23.3.0",
+		"@types/wordpress__data": "^6.0.1",
+		"@typescript-eslint/eslint-plugin": "^5.36.2",
+		"@typescript-eslint/parser": "^5.36.2",
+		"@wordpress/e2e-test-utils": "^8.0.0",
+		"@wordpress/env": "^5.2.0",
+		"@wordpress/jest-preset-default": "^9.0.0",
+		"@wordpress/jest-puppeteer-axe": "^5.0.0",
+		"@wordpress/scripts": "^24.0.0",
 		"opener": "^1.5.2",
 		"prettier": "npm:wp-prettier@2.6.2",
 		"stylelint-config-recess-order": "^3.0.0",
-		"typescript": "^4.7.3"
+		"typescript": "^4.8.2"
 	},
 	"dependencies": {
-		"@emotion/react": "^11.9.3",
-		"@emotion/styled": "^11.9.3",
-		"@wordpress/api-fetch": "^6.8.0",
-		"@wordpress/block-editor": "^9.3.0",
-		"@wordpress/blocks": "^11.10.0",
-		"@wordpress/components": "^19.13.0",
-		"@wordpress/compose": "^5.9.0",
-		"@wordpress/core-data": "^4.9.0",
-		"@wordpress/data": "^6.11.0",
-		"@wordpress/element": "^4.9.0",
-		"@wordpress/hooks": "^3.11.0",
-		"@wordpress/i18n": "^4.11.0",
-		"@wordpress/icons": "^9.2.0"
+		"@emotion/react": "^11.10.4",
+		"@emotion/styled": "^11.10.4",
+		"@wordpress/api-fetch": "^6.13.0",
+		"@wordpress/block-editor": "^9.8.0",
+		"@wordpress/blocks": "^11.15.0",
+		"@wordpress/components": "^20.0.0",
+		"@wordpress/compose": "^5.14.0",
+		"@wordpress/core-data": "^4.14.0",
+		"@wordpress/data": "^7.0.0",
+		"@wordpress/element": "^4.14.0",
+		"@wordpress/hooks": "^3.16.0",
+		"@wordpress/i18n": "^4.16.0",
+		"@wordpress/icons": "^9.7.0"
 	}
 }

src/controls/border-color-control.tsx

@@ -77,7 +77,7 @@ export default function BorderColorControl( {
 		// @ts-ignore
 		const settings = select( blockEditorStore ).getSettings();
 		return get( settings, [ 'colors' ], [] );
-	} );
+	}, [] );
 
 	const [ isLinked, setIsLinked ] = useState< boolean >( true );
 	const [ isPickerOpen, setIsPickerOpen ] = useState< boolean >( false );

src/controls/border-style-control.tsx

@@ -15,7 +15,7 @@ import {
 	ButtonGroup,
 	Button,
 	Tooltip,
-	// @ts-ignore
+	// @ts-ignore: has no exported member
 	__experimentalText as Text,
 } from '@wordpress/components';
 

src/controls/color-control.tsx

@@ -49,7 +49,7 @@ export default function ColorControl( {
 		// @ts-ignore
 		const settings = select( blockEditorStore ).getSettings();
 		return get( settings, [ 'colors' ], [] );
-	} );
+	}, [] );
 
 	const [ isPickerOpen, setIsPickerOpen ] = useState< boolean >( false );
 

src/edit.tsx

@@ -11,8 +11,11 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { InspectorControls, BlockControls, useBlockProps } from '@wordpress/block-editor';
-// @ts-ignore: has no exported member
-import { ToolbarDropdownMenu, PanelBody, Toolbar, Slot } from '@wordpress/components';
+import {
+	// @ts-ignore: has no exported member
+	ToolbarDropdownMenu,
+	PanelBody,
+} from '@wordpress/components';
 import {
 	blockTable,
 	justifyLeft,
@@ -53,15 +56,25 @@ import type { StoreOptions } from './store';
 import type { VTable, VSelectedLine, VSelectedCells } from './utils/table-state';
 
 function TableEdit( props: BlockEditProps< BlockAttributes > ) {
-	// @ts-ignore: `insertBlocksAfter` prop is not exist at @types
-	const { attributes, setAttributes, isSelected, insertBlocksAfter } = props;
+	const {
+		attributes,
+		setAttributes,
+		isSelected,
+		// @ts-ignore: `insertBlocksAfter` prop is not exist at @types
+		insertBlocksAfter,
+	} = props;
 	const { contentJustification, tableStyles, captionStyles, captionSide } = attributes;
 	const [ selectedCells, setSelectedCells ] = useState< VSelectedCells >( undefined );
 	const [ selectedLine, setSelectedLine ] = useState< VSelectedLine >( undefined );
 
 	const tableStylesObj: Properties = convertToObject( tableStyles );
 	const captionStylesObj: Properties = convertToObject( captionStyles );
-	const options = useSelect< StoreOptions >( ( select ) => select( STORE_NAME ).getOptions() );
+	const options: StoreOptions = useSelect(
+		( select ) =>
+			// @ts-ignore
+			select( STORE_NAME ).getOptions(),
+		[]
+	);
 
 	// Create virtual table object with the cells placed in positions based on how they actually look.
 	const vTable: VTable = toVirtualTable( attributes );

src/editor.scss

@@ -189,6 +189,7 @@
 				margin-bottom: 0;
 
 				.components-text-control__input {
+					box-sizing: border-box;
 					height: 36px;
 					margin: 0;
 				}
@@ -583,8 +584,13 @@
 
 .ftb-global-setting {
 	display: flex;
+	align-items: center;
 	justify-content: space-between;
 	padding: 8px 16px;
+
+	.components-spinner {
+		margin: 0;
+	}
 }
 
 // Modal Component Styles

src/index.js

@@ -41,9 +41,9 @@ registerBlockType( metadata.name, config );
 
 const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
-		const { name, isSelected } = props;
+		const { name } = props;
 
-		if ( name !== 'flexible-table-block/table' || ! isSelected ) {
+		if ( name !== 'flexible-table-block/table' ) {
 			return <BlockEdit { ...props } />;
 		}
 

src/settings/global-settings.tsx

@@ -50,11 +50,18 @@ interface NoticeInfo {
 }
 
 export default function GlobalSettings() {
-	const storeOptions: StoreOptions = useSelect( ( select ) => select( STORE_NAME ).getOptions() );
+	const storeOptions: StoreOptions = useSelect(
+		( select ) =>
+			// @ts-ignore
+			select( STORE_NAME ).getOptions(),
+		[]
+	);
 
-	const isAdministrator: boolean = useSelect( ( select ) =>
-		// @ts-ignore
-		select( coreStore ).canUser( 'create', 'users' )
+	const isAdministrator: boolean = useSelect(
+		( select ) =>
+			// @ts-ignore
+			select( coreStore ).canUser( 'create', 'users' ),
+		[]
 	);
 
 	const tableWidthUnits = useCustomUnits( { availableUnits: TABLE_WIDTH_UNITS } );
@@ -66,7 +73,10 @@ export default function GlobalSettings() {
 	const [ isWaiting, setIsWaiting ] = useState< boolean >( false );
 	const [ options, setOptions ] = useState< StoreOptions >();
 
-	const { setOptions: setStoreOptions } = useDispatch( STORE_NAME );
+	const {
+		// @ts-ignore
+		setOptions: setStoreOptions,
+	} = useDispatch( STORE_NAME );
 
 	// Set options to state.
 	useEffect( () => {
@@ -184,13 +194,17 @@ export default function GlobalSettings() {
 		} );
 	};
 
+	const isGlobalSettingLoaded = isAdministrator !== undefined && options !== undefined;
+	const showGlobalSetting = isAdministrator || options?.show_global_setting;
+
 	return (
 		<>
 			<div className="ftb-global-setting">
 				<Button icon={ help } isLink onClick={ () => setIsHelpModalOpen( true ) }>
 					{ __( 'Help', 'flexible-table-block' ) }
 				</Button>
-				{ ( isAdministrator || options?.show_global_setting ) && (
+				{ ! isGlobalSettingLoaded && <Spinner /> }
+				{ isGlobalSettingLoaded && showGlobalSetting && (
 					<Button icon={ cog } isPrimary onClick={ () => setIsSettingModalOpen( true ) }>
 						{ __( 'Global Setting', 'flexible-table-block' ) }
 					</Button>
@@ -684,7 +698,10 @@ export default function GlobalSettings() {
 						/>
 					) }
 					<ToggleControl
-						label={ __( 'Show dot on <th> tag in the editor', 'flexible-table-block' ) }
+						label={ createInterpolateElement(
+							__( 'Show dot on <code>th</code> tag in the editor', 'flexible-table-block' ),
+							{ code: <code /> }
+						) }
 						checked={ !! options.show_dot_on_th }
 						onChange={ ( value ) => {
 							setOptions( {

src/settings/table-settings.tsx

@@ -82,7 +82,12 @@ export default function TableSettings( {
 	const { hasFixedLayout, isStackedOnMobile, isScrollOnPc, isScrollOnMobile, sticky, head, foot } =
 		attributes;
 
-	const options = useSelect< StoreOptions >( ( select ) => select( STORE_NAME ).getOptions() );
+	const options: StoreOptions = useSelect(
+		( select ) =>
+			// @ts-ignore
+			select( STORE_NAME ).getOptions(),
+		[]
+	);
 
 	const tableWidthUnits = useCustomUnits( { availableUnits: TABLE_WIDTH_UNITS } );