diff --git a/.eslintrc.js b/.eslintrc.js index 490c542f9d456..9240b96c033b4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -104,6 +104,10 @@ module.exports = { rules: { 'jest/expect-expect': 'off', 'react/jsx-boolean-value': 'error', + 'react/jsx-curly-brace-presence': [ + 'error', + { props: 'never', children: 'never' }, + ], '@wordpress/dependency-group': 'error', '@wordpress/wp-global-usage': 'error', '@wordpress/react-no-unsafe-timeout': 'error', diff --git a/packages/block-editor/src/components/alignment-control/test/index.js b/packages/block-editor/src/components/alignment-control/test/index.js index de72e92489be3..178ba294127c3 100644 --- a/packages/block-editor/src/components/alignment-control/test/index.js +++ b/packages/block-editor/src/components/alignment-control/test/index.js @@ -133,7 +133,7 @@ describe( 'AlignmentUI', () => { const { container } = render( { setPaused( false ); } } diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js index 4b2d3df725a66..1c9b0fd8a7cc7 100644 --- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js +++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js @@ -9,7 +9,7 @@ export default function BlockBindingsToolbarIndicator() { return ( diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js index d27b2e436f296..8734f6f8804f0 100644 --- a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js +++ b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js @@ -54,7 +54,7 @@ export default function BlockInvalidWarning( { clientId } ) { ); } diff --git a/packages/block-editor/src/components/border-radius-control/input-controls.js b/packages/block-editor/src/components/border-radius-control/input-controls.js index c0c5c672d6364..4529c00b997ac 100644 --- a/packages/block-editor/src/components/border-radius-control/input-controls.js +++ b/packages/block-editor/src/components/border-radius-control/input-controls.js @@ -80,7 +80,7 @@ export default function BoxInputControls( { onUnitChange={ createHandleOnUnitChange( corner ) } - size={ '__unstable-large' } + size="__unstable-large" /> diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index eb2a02e5095d7..dfc4ee69437f6 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -111,7 +111,7 @@ export default function ChildLayoutControl( { > { selfStretch === 'fixed' && ( { onChange( { selfStretch, @@ -166,7 +166,7 @@ export default function ChildLayoutControl( { panelId={ panelId } > { @@ -181,7 +181,7 @@ export default function ChildLayoutControl( { min={ 1 } /> { @@ -210,7 +210,7 @@ export default function ChildLayoutControl( { > { @@ -234,7 +234,7 @@ export default function ChildLayoutControl( { { diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 88b33379e04de..d6b34876c8eaa 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -145,18 +145,14 @@ function ColorGradientControlInner( { { tabPanels.color } { tabPanels.gradient } diff --git a/packages/block-editor/src/components/contrast-checker/test/index.js b/packages/block-editor/src/components/contrast-checker/test/index.js index 26da2ac0ae8c1..9abd7d7f7e2e6 100644 --- a/packages/block-editor/src/components/contrast-checker/test/index.js +++ b/packages/block-editor/src/components/contrast-checker/test/index.js @@ -375,7 +375,7 @@ describe( 'ContrastChecker', () => { render( { render( { test( 'should render nothing when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => { const { container } = render( { { render( { test( 'should render component when the colors meet AA WCAG guidelines but all colors have alpha transparency with alpha checker enabled.', () => { render( diff --git a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js index e38a01e199b79..d963e71289cb0 100644 --- a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js +++ b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js @@ -92,7 +92,7 @@ export default function AspectRatioTool( { value={ displayValue } options={ options ?? aspectRatioOptions } onChange={ onChange } - size={ '__unstable-large' } + size="__unstable-large" __nextHasNoMarginBottom /> diff --git a/packages/block-editor/src/components/dimensions-tool/scale-tool.js b/packages/block-editor/src/components/dimensions-tool/scale-tool.js index e3ef91745aa53..05a7d2f4d251a 100644 --- a/packages/block-editor/src/components/dimensions-tool/scale-tool.js +++ b/packages/block-editor/src/components/dimensions-tool/scale-tool.js @@ -110,7 +110,7 @@ export default function ScaleTool( { help={ scaleHelp[ displayValue ] } value={ displayValue } onChange={ onChange } - size={ '__unstable-large' } + size="__unstable-large" > { options.map( ( option ) => ( diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index b7cf7f2bbc493..61a3263e232ef 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -509,7 +509,7 @@ function BackgroundSizeToolsPanelItem( { onChange={ updateBackgroundPosition } /> @@ -542,7 +542,7 @@ function BackgroundSizeToolsPanelItem( { aria-label={ __( 'Background image width' ) } onChange={ updateBackgroundSize } value={ sizeValue } - size={ '__unstable-large' } + size="__unstable-large" __unstableInputWidth="100px" min={ 0 } /> diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js index 964fd1b30100e..a20bb15c044c5 100644 --- a/packages/block-editor/src/components/global-styles/border-panel.js +++ b/packages/block-editor/src/components/global-styles/border-panel.js @@ -261,7 +261,7 @@ export default function BorderPanel( { popoverPlacement="left-start" value={ border } __experimentalIsRenderedInSidebar - size={ '__unstable-large' } + size="__unstable-large" hideLabelFromVision={ ! hasShadowControl } label={ __( 'Border' ) } /> diff --git a/packages/block-editor/src/components/height-control/index.js b/packages/block-editor/src/components/height-control/index.js index 23738378b6998..71753a67beb02 100644 --- a/packages/block-editor/src/components/height-control/index.js +++ b/packages/block-editor/src/components/height-control/index.js @@ -156,7 +156,7 @@ export default function HeightControl( { onChange={ onChange } onUnitChange={ handleUnitChange } min={ 0 } - size={ '__unstable-large' } + size="__unstable-large" label={ label } hideLabelFromVision /> diff --git a/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js index e363db4961c7c..f759b0e519fd6 100644 --- a/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js +++ b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js @@ -89,7 +89,7 @@ const WarningMaxDepthExceeded = ( { clientId } ) => { setShowDetails( true ) } > diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js index d1021b639a5c5..709e005b587ce 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js +++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js @@ -31,7 +31,7 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) { return ( { sprintf( diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js index 47c9f0e051a66..a379f4719556b 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -27,7 +27,7 @@ function CategoryTabs( { className="block-editor-inserter__category-tabs" selectOnMove={ false } selectedTabId={ selectedCategory ? selectedCategory.name : null } - orientation={ 'vertical' } + orientation="vertical" onSelect={ ( categoryId ) => { // Pass the full category object onSelectCategory( diff --git a/packages/block-editor/src/components/inspector-controls/fill.native.js b/packages/block-editor/src/components/inspector-controls/fill.native.js index 98b6698721e1c..69da92dd42b37 100644 --- a/packages/block-editor/src/components/inspector-controls/fill.native.js +++ b/packages/block-editor/src/components/inspector-controls/fill.native.js @@ -52,11 +52,9 @@ export default function InspectorControlsFill( { return ( <> - { - - { () => { children } } - - } + + { () => { children } } + { Children.count( children ) > 0 && } diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js index f6abaee9258d1..91bfbd7eddaa0 100644 --- a/packages/block-editor/src/components/list-view/block-contents.js +++ b/packages/block-editor/src/components/list-view/block-contents.js @@ -77,7 +77,7 @@ const ListViewBlockContents = forwardRef( { ( { draggable, onDragStart, onDragEnd } ) => ( id ) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index e597b65d63b86..bbd9cbad73a4a 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -164,7 +164,7 @@ function MediaPlaceholder( props ) { activeOpacity={ 0.5 } accessibilityLabel={ accessibilityLabel } style={ buttonStyles } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityHint={ accessibilityHint } hitSlop={ hitSlop } onPress={ onButtonPress( open ) } @@ -181,7 +181,7 @@ function MediaPlaceholder( props ) { activeOpacity={ 0.5 } accessibilityLabel={ accessibilityLabel } style={ styles[ 'media-placeholder__appender' ] } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityHint={ accessibilityHint } hitSlop={ hitSlop } onPress={ onButtonPress( open ) } diff --git a/packages/block-editor/src/components/resolution-tool/index.js b/packages/block-editor/src/components/resolution-tool/index.js index 71c7e508ca3ed..42fea6e8655a8 100644 --- a/packages/block-editor/src/components/resolution-tool/index.js +++ b/packages/block-editor/src/components/resolution-tool/index.js @@ -49,7 +49,7 @@ export default function ResolutionTool( { options={ options } onChange={ onChange } help={ __( 'Select the size of the source image.' ) } - size={ '__unstable-large' } + size="__unstable-large" /> ); diff --git a/packages/block-editor/src/components/rich-text/native/test/index.native.js b/packages/block-editor/src/components/rich-text/native/test/index.native.js index 8197952a116dd..26b6d6c5358ec 100644 --- a/packages/block-editor/src/components/rich-text/native/test/index.native.js +++ b/packages/block-editor/src/components/rich-text/native/test/index.native.js @@ -151,7 +151,7 @@ describe( '', () => { const expectedFontSize = 16; // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = getByLabelText( 'editor' ).props.fontSize; @@ -164,8 +164,8 @@ describe( '', () => { // Act. const { getByLabelText } = render( ); // Assert. @@ -179,7 +179,7 @@ describe( '', () => { // Act. const { getByLabelText } = render( ); @@ -195,7 +195,7 @@ describe( '', () => { mockGlobalSettings( { fontSize: 'min(2em, 3em)' } ); // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = getByLabelText( 'editor' ).props.fontSize; @@ -209,7 +209,7 @@ describe( '', () => { mockGlobalSettings( { fontSize: 'min(2em, 3em)' } ); // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = getByLabelText( 'editor' ).props.fontSize; @@ -224,7 +224,7 @@ describe( '', () => { mockGlobalSettings( { fontSize: unit } ); // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = @@ -241,9 +241,9 @@ describe( '', () => { // Act. const { getByLabelText } = render( ); @@ -260,7 +260,7 @@ describe( '', () => { // Act. const { getByLabelText } = render( @@ -276,7 +276,7 @@ describe( '', () => { Dimensions.set( { window: { ...window, width: 300 } } ); // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = getByLabelText( 'editor' ).props.fontSize; @@ -289,7 +289,7 @@ describe( '', () => { Dimensions.set( { window: { ...window, height: 300 } } ); // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = getByLabelText( 'editor' ).props.fontSize; @@ -335,7 +335,7 @@ describe( '', () => { const style = { lineHeight: 0.2 }; // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = getByLabelText( 'editor' ).props.lineHeight; diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js index 6feb583c29cdb..eacdda5927f2d 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js @@ -230,7 +230,7 @@ export default function SpacingInputControl( { label={ ariaLabel } hideLabelFromVision className="spacing-sizes-control__custom-value-input" - size={ '__unstable-large' } + size="__unstable-large" onDragStart={ () => { if ( value?.charAt( 0 ) === '-' ) { setMinValue( 0 ); @@ -312,7 +312,7 @@ export default function SpacingInputControl( { options={ options } label={ ariaLabel } hideLabelFromVision - size={ '__unstable-large' } + size="__unstable-large" onMouseOver={ onMouseOver } onMouseOut={ onMouseOut } onFocus={ onMouseOver } diff --git a/packages/block-editor/src/components/video-player/index.native.js b/packages/block-editor/src/components/video-player/index.native.js index a409c1d4ad99f..3c9de8758579b 100644 --- a/packages/block-editor/src/components/video-player/index.native.js +++ b/packages/block-editor/src/components/video-player/index.native.js @@ -99,7 +99,7 @@ class Video extends Component { // So we are setting controls=false and adding a play button that // will trigger presentFullscreenPlayer() controls={ false } - ignoreSilentSwitch={ 'ignore' } + ignoreSilentSwitch="ignore" paused={ ! isFullScreen } onLayout={ this.onVideoLayout } onFullscreenPlayerWillPresent={ () => { diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 3c9cde478cdd0..a5d4a0cb43bf3 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -303,7 +303,7 @@ export function PositionPanelPure( { onChange={ ( { selectedItem } ) => { onChangeType( selectedItem.value ); } } - size={ '__unstable-large' } + size="__unstable-large" /> diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index f628a9bf3c3f6..72beca11b3f0c 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -403,12 +403,12 @@ function OrientationControl( { layout, onChange } ) { > diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index e3f956f6dc13d..4528de117c45b 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -203,7 +203,7 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) { { onChange( { ...layout, @@ -251,7 +251,7 @@ function GridLayoutColumnsAndRowsControl( { { /** * If the input is cleared, avoid switching @@ -296,7 +296,7 @@ function GridLayoutColumnsAndRowsControl( { { onChange( { ...layout, @@ -372,12 +372,12 @@ function GridLayoutTypeControl( { layout, onChange } ) { isBlock > diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js index ae8c8315aa2e8..6578c12eefc4e 100644 --- a/packages/block-library/src/block/edit.native.js +++ b/packages/block-library/src/block/edit.native.js @@ -232,7 +232,7 @@ export default function ReusableBlockEdit( { diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 155fe797e3147..49baec552bed4 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -339,7 +339,7 @@ function ButtonEdit( props ) { } } anchor={ popoverAnchor } focusOnMount={ isEditingURL ? 'firstElement' : false } - __unstableSlotName={ '__unstable-block-tools-after' } + __unstableSlotName="__unstable-block-tools-after" shift > @@ -281,7 +281,7 @@ function Controls( { value={ dimRatio } onChange={ onOpacityChange } style={ styles.rangeCellContainer } - separatorType={ 'topFullWidth' } + separatorType="topFullWidth" /> ) : null } diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 8e3a37a50c7c2..99324545bf798 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -512,7 +512,7 @@ const Cover = ( { muted disableFocus repeat - resizeMode={ 'cover' } + resizeMode="cover" source={ { uri: url } } onLoad={ onVideoLoad } onLoadStart={ onVideoLoadStart } diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index a978b2ff184a7..a10fb4b0675d9 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -79,7 +79,7 @@ function CoverHeightInput( { min={ min } onChange={ handleOnChange } onUnitChange={ onUnitChange } - __unstableInputWidth={ '80px' } + __unstableInputWidth="80px" units={ units } value={ computedValue } /> diff --git a/packages/block-library/src/embed/embed-no-preview.native.js b/packages/block-library/src/embed/embed-no-preview.native.js index cac8c5d1a4c10..de97ca73a1618 100644 --- a/packages/block-library/src/embed/embed-no-preview.native.js +++ b/packages/block-library/src/embed/embed-no-preview.native.js @@ -124,7 +124,7 @@ const EmbedNoPreview = ( { const embedNoProviderPreview = ( <> ) } -
+
{ showDownloadButton && ( -
+
{ /* Using RichText here instead of PlainText so that it can be styled like a button. */ } ) } { Platform.isWeb && ! imageSizeOptions && hasImageIds && ( - + { __( 'Resolution' ) } - + { __( 'Loading options…' ) } diff --git a/packages/block-library/src/gallery/v1/gallery-button.native.js b/packages/block-library/src/gallery/v1/gallery-button.native.js index 8804e99cf2e7e..4dc9abd9753ee 100644 --- a/packages/block-library/src/gallery/v1/gallery-button.native.js +++ b/packages/block-library/src/gallery/v1/gallery-button.native.js @@ -35,7 +35,7 @@ export function Button( props ) { style={ buttonStyle } activeOpacity={ 0.7 } accessibilityLabel={ accessibilityLabel } - accessibilityRole={ 'button' } + accessibilityRole="button" onPress={ onClick } disabled={ isDisabled } > diff --git a/packages/block-library/src/gallery/v1/gallery-image.native.js b/packages/block-library/src/gallery/v1/gallery-image.native.js index b887ca0bbfe04..fc07a209d8c6a 100644 --- a/packages/block-library/src/gallery/v1/gallery-image.native.js +++ b/packages/block-library/src/gallery/v1/gallery-image.native.js @@ -310,7 +310,7 @@ class GalleryImage extends Component { onPress={ this.onMediaPressed } accessible={ ! isSelected } // We need only child views to be accessible after the selection. accessibilityLabel={ this.accessibilityLabelImageContainer() } // if we don't set this explicitly it reads system provided accessibilityLabels of all child components and those include pretty technical words which don't make sense - accessibilityRole={ 'imagebutton' } // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity + accessibilityRole="imagebutton" // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity > ); @@ -359,9 +359,7 @@ export function ImageEdit( { } } > { lockUrlControls ? ( - + { lockUrlControlsMessage } ) : ( diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 010ec4cd59694..4789efd6bf008 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -580,9 +580,7 @@ export class ImageEdit extends Component { 'Describe the purpose of the image. Leave empty if decorative.' ) }{ ' ' } @@ -617,7 +615,7 @@ export class ImageEdit extends Component { styles.removeFeaturedButton, ] } cellContainerStyle={ styles.setFeaturedButtonCellContainer } - separatorType={ 'none' } + separatorType="none" onPress={ () => this.onSetFeatured( MEDIA_ID_NO_FEATURED_IMAGE_SET ) } @@ -629,7 +627,7 @@ export class ImageEdit extends Component { label={ __( 'Set as Featured Image' ) } labelStyle={ setFeaturedButtonStyle } cellContainerStyle={ styles.setFeaturedButtonCellContainer } - separatorType={ 'none' } + separatorType="none" onPress={ () => this.onSetFeatured( attributes.id ) } /> ); diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js index 90edce4f84b5b..632efa149313f 100644 --- a/packages/block-library/src/latest-posts/edit.native.js +++ b/packages/block-library/src/latest-posts/edit.native.js @@ -207,7 +207,7 @@ class LatestPostsEdit extends Component { label={ __( 'Add link to featured image' ) } checked={ addLinkToFeaturedImage } onChange={ this.onSetAddLinkToFeaturedImage } - separatorType={ 'topFullWidth' } + separatorType="topFullWidth" /> ) } diff --git a/packages/block-library/src/media-text/icon-retry.native.js b/packages/block-library/src/media-text/icon-retry.native.js index 580cd1fff188f..d9b3d82e796cb 100644 --- a/packages/block-library/src/media-text/icon-retry.native.js +++ b/packages/block-library/src/media-text/icon-retry.native.js @@ -6,6 +6,6 @@ import { Path, SVG } from '@wordpress/components'; export default ( - + ); diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js index a06bba719db5e..eaee027c06185 100644 --- a/packages/block-library/src/media-text/media-container.native.js +++ b/packages/block-library/src/media-text/media-container.native.js @@ -330,7 +330,7 @@ class MediaContainer extends Component { onSelect={ this.onSelectMediaUploadOption } allowedTypes={ ALLOWED_MEDIA_TYPES } onFocus={ this.props.onFocus } - className={ 'no-block-outline' } + className="no-block-outline" /> ); } diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js index a6164f590ca21..7432f5fae0f12 100644 --- a/packages/block-library/src/missing/edit.native.js +++ b/packages/block-library/src/missing/edit.native.js @@ -88,7 +88,7 @@ export class UnsupportedBlockEdit extends Component { onPress={ this.onHelpButtonPressed } style={ styles.helpIconContainer } accessibilityLabel={ __( 'Help button' ) } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityHint={ __( 'Tap here to show help' ) } > diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js index f435b5e5a8a95..bbba77707e815 100644 --- a/packages/block-library/src/navigation-submenu/edit.js +++ b/packages/block-library/src/navigation-submenu/edit.js @@ -459,34 +459,32 @@ export default function NavigationSubmenuEdit( { { /* eslint-disable jsx-a11y/anchor-is-valid */ } { /* eslint-enable */ } - { - - setAttributes( { label: labelValue } ) + + setAttributes( { label: labelValue } ) + } + onMerge={ mergeBlocks } + onReplace={ onReplace } + aria-label={ __( 'Navigation link text' ) } + placeholder={ itemLabelPlaceholder } + withoutInteractiveFormatting + allowedFormats={ [ + 'core/bold', + 'core/italic', + 'core/image', + 'core/strikethrough', + ] } + onClick={ () => { + if ( ! openSubmenusOnClick && ! url ) { + setIsLinkOpen( true ); + setOpenedBy( ref.current ); } - onMerge={ mergeBlocks } - onReplace={ onReplace } - aria-label={ __( 'Navigation link text' ) } - placeholder={ itemLabelPlaceholder } - withoutInteractiveFormatting - allowedFormats={ [ - 'core/bold', - 'core/italic', - 'core/image', - 'core/strikethrough', - ] } - onClick={ () => { - if ( ! openSubmenusOnClick && ! url ) { - setIsLinkOpen( true ); - setOpenedBy( ref.current ); - } - } } - /> - } + } } + /> { ! openSubmenusOnClick && isLinkOpen && ( -

+

{ convertDescription }

diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js index 0e81336dfde28..2106aa7c39e9f 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -63,7 +63,7 @@ function BlockContent( { if ( pages === null ) { return (
- + { __( 'Page List: Cannot retrieve Pages.' ) }
@@ -73,7 +73,7 @@ function BlockContent( { if ( pages.length === 0 ) { return (
- + { __( 'Page List: Cannot retrieve Pages.' ) }
@@ -101,7 +101,7 @@ function BlockContent( { return (
- + { __( 'Page List: Cannot retrieve Pages.' ) }
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 1a88576965002..cfe7b29caf5de 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -441,7 +441,7 @@ export default function SearchEdit( { widthUnit: newUnit, } ); } } - __unstableInputWidth={ '80px' } + __unstableInputWidth="80px" value={ `${ width }${ widthUnit }` } units={ units } /> diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js index 3ea794a9b8c20..0b4b6b0ac7d4b 100644 --- a/packages/block-library/src/social-link/edit.native.js +++ b/packages/block-library/src/social-link/edit.native.js @@ -171,7 +171,7 @@ const SocialLinkEdit = ( { ( -

{ `No default animation. Use one of type = "appear", "slide-in", or "loading".` }

+

+ { /* eslint-disable react/no-unescaped-entities */ } + No default animation. Use one of type = "appear", "slide-in", or + "loading". + { /* eslint-enable react/no-unescaped-entities */ } +

), }; diff --git a/packages/components/src/autocomplete/test/index.tsx b/packages/components/src/autocomplete/test/index.tsx index 7a31680b3dd5e..0df784f8367cd 100644 --- a/packages/components/src/autocomplete/test/index.tsx +++ b/packages/components/src/autocomplete/test/index.tsx @@ -67,10 +67,10 @@ describe( 'AutocompleterUI', () => { return (
{} } onSelect={ () => {} } diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index f093502a750fd..063a2cc191eae 100644 --- a/packages/components/src/button/index.native.js +++ b/packages/components/src/button/index.native.js @@ -183,7 +183,7 @@ export function Button( props ) { accessible accessibilityLabel={ label } accessibilityStates={ states } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityHint={ hint } onPress={ onClick } style={ containerStyle } diff --git a/packages/components/src/circular-option-picker/circular-option-picker.tsx b/packages/components/src/circular-option-picker/circular-option-picker.tsx index 346a912535fa3..cd2ddcf90d7ce 100644 --- a/packages/components/src/circular-option-picker/circular-option-picker.tsx +++ b/packages/components/src/circular-option-picker/circular-option-picker.tsx @@ -102,7 +102,7 @@ function ListboxCircularOptionPicker( { ...additionalProps } id={ baseId } store={ compositeStore } - role={ 'listbox' } + role="listbox" > { options } @@ -156,7 +156,7 @@ function CircularOptionPicker( props: CircularOptionPickerProps ) { ) : undefined; const options = ( -
+
{ optionsProp }
); diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx index 45643e9d6dd6e..e091a2ac54d41 100644 --- a/packages/components/src/circular-option-picker/stories/index.story.tsx +++ b/packages/components/src/circular-option-picker/stories/index.story.tsx @@ -101,7 +101,7 @@ const DefaultActions = () => { setCurrentColor?.( undefined ) } > - { 'Clear' } + Clear ); }; diff --git a/packages/components/src/circular-option-picker/test/index.tsx b/packages/components/src/circular-option-picker/test/index.tsx index b37cb7e534168..0b5ccbeecb57d 100644 --- a/packages/components/src/circular-option-picker/test/index.tsx +++ b/packages/components/src/circular-option-picker/test/index.tsx @@ -9,17 +9,11 @@ import { press, sleep } from '@ariakit/test'; */ import CircularOptionPicker from '..'; -const SINGLE_OPTION = [ ]; +const SINGLE_OPTION = [ ]; const MULTIPLE_OPTIONS = [ - , - , + , + , ]; const DEFAULT_PROPS = { diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 87b8e704b704e..bb45de6d66e88 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -285,7 +285,7 @@ function ColorPalette( { onColorPress( color ) } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityState={ { selected: isSelected( color ), } } @@ -326,7 +326,7 @@ function ColorPalette( { ) } { describe( 'rendering', () => { it( 'renders with defaults', () => { const { container } = render( - + ); expect( container ).toMatchSnapshot(); } ); @@ -37,7 +34,7 @@ describe( 'DimensionControl', () => { const { container } = render( ); @@ -48,9 +45,9 @@ describe( 'DimensionControl', () => { const { container } = render( ); expect( container ).toMatchSnapshot(); @@ -78,7 +75,7 @@ describe( 'DimensionControl', () => { const { container } = render( ); @@ -93,7 +90,7 @@ describe( 'DimensionControl', () => { render( ); @@ -115,7 +112,7 @@ describe( 'DimensionControl', () => { render( ); diff --git a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx index eba4a43fe49aa..6996431fc6053 100644 --- a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx +++ b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx @@ -110,7 +110,7 @@ export const Default: StoryFn< typeof DropdownMenu > = ( props ) => ( > With prefix - With suffix + With suffix } diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx index 96d67441f78d4..3df2f78345066 100644 --- a/packages/components/src/dropdown/stories/index.story.tsx +++ b/packages/components/src/dropdown/stories/index.story.tsx @@ -66,7 +66,9 @@ WithMorePadding.args = { ...Default.args, renderContent: () => ( - Content wrapped with { `paddingSize="medium"` }. + { /* eslint-disable react/no-unescaped-entities */ } + Content wrapped with paddingSize="medium". + { /* eslint-enable react/no-unescaped-entities */ } ), }; @@ -81,7 +83,9 @@ WithNoPadding.args = { ...Default.args, renderContent: () => ( - Content wrapped with { `paddingSize="none"` }. + { /* eslint-disable react/no-unescaped-entities */ } + Content wrapped with paddingSize="none". + { /* eslint-enable react/no-unescaped-entities */ } ), }; diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js index 06f0d386b74d7..b12a27296ca29 100644 --- a/packages/components/src/font-size-picker/index.native.js +++ b/packages/components/src/font-size-picker/index.native.js @@ -85,7 +85,7 @@ function FontSizePicker( { : __( 'Default' ) } onPress={ openSubSheet } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityLabel={ accessibilityLabel } accessibilityHint={ sprintf( // translators: %s: Select control button label e.g. Small @@ -112,8 +112,8 @@ function FontSizePicker( { label={ __( 'Default' ) } onPress={ onChangeValue( undefined ) } leftAlign - key={ 'default' } - accessibilityRole={ 'button' } + key="default" + accessibilityRole="button" accessibilityLabel={ __( 'Selected: Default' ) } accessibilityHint={ __( 'Double tap to select default font size' @@ -139,7 +139,7 @@ function FontSizePicker( { onPress={ onChangeValue( item.sizePx ) } leftAlign key={ index } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityLabel={ item.sizePx === selectedValue ? sprintf( diff --git a/packages/components/src/keyboard-shortcuts/stories/index.story.tsx b/packages/components/src/keyboard-shortcuts/stories/index.story.tsx index d181be737353c..9e3a1e207451b 100644 --- a/packages/components/src/keyboard-shortcuts/stories/index.story.tsx +++ b/packages/components/src/keyboard-shortcuts/stories/index.story.tsx @@ -32,7 +32,9 @@ Default.args = { }, children: (
-

{ `Hit the "a" or "b" key in this textarea:` }

+ { /* eslint-disable react/no-unescaped-entities */ } +

Hit the "a" or "b" key in this textarea:

+ { /* eslint-enable react/no-unescaped-entities */ }