From ee97861ebeebd2fee60658b3a5c5b8a1d3c5a8cb Mon Sep 17 00:00:00 2001 From: Souptik Datta Date: Sat, 11 May 2024 12:45:36 +0530 Subject: [PATCH 1/4] Refactor color settings component in TS Signed-off-by: Souptik Datta --- components/color-settings/index.js | 88 ----------------------- components/color-settings/index.tsx | 106 ++++++++++++++++++++++++++++ 2 files changed, 106 insertions(+), 88 deletions(-) delete mode 100644 components/color-settings/index.js create mode 100644 components/color-settings/index.tsx diff --git a/components/color-settings/index.js b/components/color-settings/index.js deleted file mode 100644 index ba65daa7..00000000 --- a/components/color-settings/index.js +++ /dev/null @@ -1,88 +0,0 @@ -/** - * External dependencies - */ - -import PropTypes from 'prop-types'; -/** - * WordPress dependencies - */ -import { BaseControl } from '@wordpress/components'; -import { ColorPalette } from '@wordpress/block-editor'; -import { useInstanceId } from '@wordpress/compose'; - -/** - * ColorSetting - * - * @typedef ColorSettingProps - * @property {string} label If this property is added, a label will be generated using label property as the content. - * @property {string} help If this property is added, a help text will be generated using help property as the content. - * @property {string} className If no className is passed only components-base-control is used. - * @property {boolean} hideLabelFromVision If true, the label will only be visible to screen readers - * @property {Array} colors Array with the colors to be shown. - * @property {string} value currently active value. - * @property {Function} onChange Callback called when a color is selected. - * @property {boolean} disableCustomColors Whether to allow custom color or not. - * @property {boolean} clearable Whether the palette should have a clearing button or not. - * - * @param {ColorSettingProps} props ColorSetting Props - * @returns {*} React Element - */ -// eslint-disable-next-line import/prefer-default-export -export const ColorSetting = (props) => { - const { - label, - help, - className, - hideLabelFromVision, - colors, - value, - onChange, - disableCustomColors, - clearable, - ...rest - } = props; - - const instanceId = useInstanceId(ColorSetting); - const id = `color-settings-${instanceId}`; - - return ( - - - - ); -}; - -ColorSetting.defaultProps = { - label: '', - hideLabelFromVision: false, - help: '', - className: '', - disableCustomColors: false, - value: '', - clearable: true, -}; - -ColorSetting.propTypes = { - label: PropTypes.string, - hideLabelFromVision: PropTypes.bool, - help: PropTypes.string, - className: PropTypes.string, - disableCustomColors: PropTypes.bool, - value: PropTypes.string, - clearable: PropTypes.bool, - colors: PropTypes.array.isRequired, - onChange: PropTypes.func.isRequired, -}; diff --git a/components/color-settings/index.tsx b/components/color-settings/index.tsx new file mode 100644 index 00000000..c7ef1a97 --- /dev/null +++ b/components/color-settings/index.tsx @@ -0,0 +1,106 @@ +/** + * WordPress dependencies + */ +import { BaseControl } from '@wordpress/components'; +import { ColorPalette } from '@wordpress/block-editor'; +import { useInstanceId } from '@wordpress/compose'; + +interface ColorSettingProps { + /** + * If this property is added, a label will be generated using label property as the content. + */ + label?: string, + + /** + * If true, the label will only be visible to screen readers. + */ + hideLabelFromVision?: boolean, + + /** + * If this property is added, a help text will be generated using help property as the content. + */ + help?: string, + + /** + * If no className is passed only components-base-control is used. + */ + className?: string, + + /** + * Whether to allow custom color or not. + */ + disableCustomColors?: boolean, + + /** + * currently active value. + */ + value?: string, + + /** + * Whether the palette should have a clearing button or not. + */ + clearable?: boolean, + + /** + * Array with the colors to be shown. + */ + colors: Array, + + /** + * Callback called when a color is selected. + */ + onChange: Function, + + /** + * Rest of the properties. + */ + [key: string]: any; +} + +interface Color { + /** + * Color name. + */ + name: string, + + /** + * Color hex code. + */ + color: string, +} + +// eslint-disable-next-line import/prefer-default-export +export const ColorSetting: React.FC = ({ + label= '', + help = '', + className = '', + hideLabelFromVision = false, + colors, + value = '', + onChange, + disableCustomColors = false, + clearable = true, + ...rest +}) => { + const instanceId = useInstanceId(ColorSetting); + const id = `color-settings-${instanceId}`; + + return ( + + + + ); +}; From 9c9d05cc2a135dd32aec593d3b597b9e9bbc4595 Mon Sep 17 00:00:00 2001 From: Souptik Datta Date: Sat, 11 May 2024 12:47:47 +0530 Subject: [PATCH 2/4] Add color settings example block Signed-off-by: Souptik Datta --- .../blocks/color-settings-example/block.json | 18 +++++++++ .../src/blocks/color-settings-example/edit.js | 40 +++++++++++++++++++ .../blocks/color-settings-example/index.js | 8 ++++ 3 files changed, 66 insertions(+) create mode 100644 example/src/blocks/color-settings-example/block.json create mode 100644 example/src/blocks/color-settings-example/edit.js create mode 100644 example/src/blocks/color-settings-example/index.js diff --git a/example/src/blocks/color-settings-example/block.json b/example/src/blocks/color-settings-example/block.json new file mode 100644 index 00000000..42fe1984 --- /dev/null +++ b/example/src/blocks/color-settings-example/block.json @@ -0,0 +1,18 @@ +{ + "name": "example/color-settings-example", + "title": "Color Settings Component Example", + "description": "Example Block to show the Color settings component", + "icon": "smiley", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "attributes": { + "color": { + "type": "string" + } + }, + "variations": [], + "editorScript": "file:./index.js" +} \ No newline at end of file diff --git a/example/src/blocks/color-settings-example/edit.js b/example/src/blocks/color-settings-example/edit.js new file mode 100644 index 00000000..eabab1e6 --- /dev/null +++ b/example/src/blocks/color-settings-example/edit.js @@ -0,0 +1,40 @@ +import { __ } from '@wordpress/i18n'; +import { InspectorControls } from '@wordpress/block-editor'; +import { PanelBody } from '@wordpress/components'; + +import { ColorSetting } from '@10up/block-components'; + +export const BlockEdit = (props) => { + const { + attributes: { color }, + setAttributes + } = props; + + const colors = [ + { name: 'red', color: '#f00' }, + { name: 'white', color: '#fff' }, + { name: 'blue', color: '#00f' }, + ]; + return ( + <> + + + setAttributes( { color: val } ) } + /> + + + setAttributes( { color: val } ) } + /> + + ) +} \ No newline at end of file diff --git a/example/src/blocks/color-settings-example/index.js b/example/src/blocks/color-settings-example/index.js new file mode 100644 index 00000000..b633be8a --- /dev/null +++ b/example/src/blocks/color-settings-example/index.js @@ -0,0 +1,8 @@ +import { registerBlockType } from '@wordpress/blocks'; +import metadata from './block.json'; +import { BlockEdit } from './edit'; + +registerBlockType( metadata, { + edit: BlockEdit, + save: () => null +} ); From a0eec76095f43102337cab40abeb0e08a76ca65b Mon Sep 17 00:00:00 2001 From: Souptik Datta Date: Mon, 13 May 2024 15:25:55 +0530 Subject: [PATCH 3/4] fix indentation issues Signed-off-by: Souptik Datta --- .../blocks/color-settings-example/block.json | 26 +++++++++---------- .../src/blocks/color-settings-example/edit.js | 4 +-- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/example/src/blocks/color-settings-example/block.json b/example/src/blocks/color-settings-example/block.json index 42fe1984..9c31f138 100644 --- a/example/src/blocks/color-settings-example/block.json +++ b/example/src/blocks/color-settings-example/block.json @@ -1,18 +1,18 @@ { "name": "example/color-settings-example", "title": "Color Settings Component Example", - "description": "Example Block to show the Color settings component", - "icon": "smiley", - "category": "common", - "example": {}, - "supports": { - "html": false - }, - "attributes": { - "color": { - "type": "string" - } - }, - "variations": [], + "description": "Example Block to show the Color settings component", + "icon": "smiley", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "attributes": { + "color": { + "type": "string" + } + }, + "variations": [], "editorScript": "file:./index.js" } \ No newline at end of file diff --git a/example/src/blocks/color-settings-example/edit.js b/example/src/blocks/color-settings-example/edit.js index eabab1e6..ed97a414 100644 --- a/example/src/blocks/color-settings-example/edit.js +++ b/example/src/blocks/color-settings-example/edit.js @@ -12,8 +12,8 @@ export const BlockEdit = (props) => { const colors = [ { name: 'red', color: '#f00' }, - { name: 'white', color: '#fff' }, - { name: 'blue', color: '#00f' }, + { name: 'white', color: '#fff' }, + { name: 'blue', color: '#00f' }, ]; return ( <> From 9725a3a311eb979f36e94d692a048bd03f032abc Mon Sep 17 00:00:00 2001 From: Souptik Datta Date: Mon, 13 May 2024 18:19:47 +0530 Subject: [PATCH 4/4] remove passing remaining props to BaseControl component Signed-off-by: Souptik Datta --- components/color-settings/index.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/components/color-settings/index.tsx b/components/color-settings/index.tsx index c7ef1a97..14f8c59f 100644 --- a/components/color-settings/index.tsx +++ b/components/color-settings/index.tsx @@ -50,11 +50,6 @@ interface ColorSettingProps { * Callback called when a color is selected. */ onChange: Function, - - /** - * Rest of the properties. - */ - [key: string]: any; } interface Color { @@ -80,7 +75,6 @@ export const ColorSetting: React.FC = ({ onChange, disableCustomColors = false, clearable = true, - ...rest }) => { const instanceId = useInstanceId(ColorSetting); const id = `color-settings-${instanceId}`; @@ -92,7 +86,6 @@ export const ColorSetting: React.FC = ({ help={help} className={className} hideLabelFromVision={hideLabelFromVision} - {...rest} >