diff --git a/packages/block-editor/src/components/color-palette/control.js b/packages/block-editor/src/components/color-palette/control.js index 097cae030e9a3..6a2da23b527c6 100644 --- a/packages/block-editor/src/components/color-palette/control.js +++ b/packages/block-editor/src/components/color-palette/control.js @@ -3,7 +3,6 @@ */ import { BaseControl, ColorIndicator } from '@wordpress/components'; import { ifCondition, compose } from '@wordpress/compose'; -import { Fragment } from '@wordpress/element'; import { sprintf, __ } from '@wordpress/i18n'; /** @@ -27,22 +26,19 @@ export function ColorPaletteControl( { const colorName = colorObject && colorObject.name; const ariaLabel = sprintf( colorIndicatorAriaLabel, label.toLowerCase(), colorName || value ); - const labelElement = ( - - { label } - { value && ( - - ) } - - ); - return ( + > + + { label } + { value && ( + + ) } + - Test Color - - - } > + + Test Color + + + + + { __( 'Font Size' ) } +
{ ( fontSizes.length > 0 ) && + + +``` + + +```jsx + +``` + +Examples of **correct** code for this rule: + + +```jsx + +``` + +```jsx + + + +``` + +```jsx + + + +``` diff --git a/packages/eslint-plugin/rules/__tests__/no-base-control-with-label-without-id.js b/packages/eslint-plugin/rules/__tests__/no-base-control-with-label-without-id.js new file mode 100644 index 0000000000000..a03a3a2296f7b --- /dev/null +++ b/packages/eslint-plugin/rules/__tests__/no-base-control-with-label-without-id.js @@ -0,0 +1,74 @@ +/** + * External dependencies + */ +import { RuleTester } from 'eslint'; + +/** + * Internal dependencies + */ +import rule from '../no-base-control-with-label-without-id'; + +const ruleTester = new RuleTester( { + parserOptions: { + ecmaVersion: 6, + ecmaFeatures: { + jsx: true, + }, + }, +} ); + +ruleTester.run( 'no-base-control-with-label-without-id', rule, { + valid: [ + { + code: ` + `, + }, + { + code: ``, + }, + { + code: ` + + + `, + }, + { + code: ` + + + `, + }, + { + code: ` + + + `, + }, + ], + invalid: [ + { + code: ` + + + `, + errors: [ { message: 'When using BaseControl component if a label property is passed an id property should also be passed.' } ], + }, + { + code: ` + `, + errors: [ { message: 'When using BaseControl component if a label property is passed an id property should also be passed.' } ], + }, + ], +} ); diff --git a/packages/eslint-plugin/rules/no-base-control-with-label-without-id.js b/packages/eslint-plugin/rules/no-base-control-with-label-without-id.js new file mode 100644 index 0000000000000..4fd516a52cc68 --- /dev/null +++ b/packages/eslint-plugin/rules/no-base-control-with-label-without-id.js @@ -0,0 +1,26 @@ +module.exports = { + meta: { + type: 'problem', + schema: [], + }, + create( context ) { + return { + 'JSXOpeningElement[name.name=\'BaseControl\']': ( node ) => { + const containsAttribute = ( attrName ) => { + return node.attributes.some( ( attribute ) => { + return attribute.name.name === attrName; + } ); + }; + if ( + containsAttribute( 'label' ) && + ! containsAttribute( 'id' ) + ) { + context.report( { + node, + message: 'When using BaseControl component if a label property is passed an id property should also be passed.', + } ); + } + }, + }; + }, +};