Skip to content

Commit

Permalink
Paragraph: store subscription for selected block only (#56967)
Browse files Browse the repository at this point in the history
  • Loading branch information
ellatrix authored Dec 12, 2023
1 parent 45d7bab commit dc95863
Showing 1 changed file with 49 additions and 36 deletions.
85 changes: 49 additions & 36 deletions packages/block-library/src/paragraph/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,48 @@ function hasDropCapDisabled( align ) {
return align === ( isRTL() ? 'left' : 'right' ) || align === 'center';
}

function DropCapControl( { clientId, attributes, setAttributes } ) {
// Please do no add a useSelect call to the paragraph block unconditionaly.
// Every useSelect added to a (frequestly used) block will degrade the load
// and type bit. By moving it within InspectorControls, the subscription is
// now only added for the selected block(s).
const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' );

if ( ! isDropCapFeatureEnabled ) {
return null;
}

const { align, dropCap } = attributes;

let helpText;
if ( hasDropCapDisabled( align ) ) {
helpText = __( 'Not available for aligned text.' );
} else if ( dropCap ) {
helpText = __( 'Showing large initial letter.' );
} else {
helpText = __( 'Toggle to show a large initial letter.' );
}

return (
<ToolsPanelItem
hasValue={ () => !! dropCap }
label={ __( 'Drop cap' ) }
onDeselect={ () => setAttributes( { dropCap: undefined } ) }
resetAllFilter={ () => ( { dropCap: undefined } ) }
panelId={ clientId }
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Drop cap' ) }
checked={ !! dropCap }
onChange={ () => setAttributes( { dropCap: ! dropCap } ) }
help={ helpText }
disabled={ hasDropCapDisabled( align ) ? true : false }
/>
</ToolsPanelItem>
);
}

function ParagraphBlock( {
attributes,
mergeBlocks,
Expand All @@ -58,7 +100,6 @@ function ParagraphBlock( {
clientId,
} ) {
const { align, content, direction, dropCap, placeholder } = attributes;
const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' );
const blockProps = useBlockProps( {
ref: useOnEnter( { clientId, content } ),
className: classnames( {
Expand All @@ -68,15 +109,6 @@ function ParagraphBlock( {
style: { direction },
} );

let helpText;
if ( hasDropCapDisabled( align ) ) {
helpText = __( 'Not available for aligned text.' );
} else if ( dropCap ) {
helpText = __( 'Showing large initial letter.' );
} else {
helpText = __( 'Toggle to show a large initial letter.' );
}

return (
<>
<BlockControls group="block">
Expand All @@ -98,32 +130,13 @@ function ParagraphBlock( {
}
/>
</BlockControls>
{ isDropCapFeatureEnabled && (
<InspectorControls group="typography">
<ToolsPanelItem
hasValue={ () => !! dropCap }
label={ __( 'Drop cap' ) }
onDeselect={ () =>
setAttributes( { dropCap: undefined } )
}
resetAllFilter={ () => ( { dropCap: undefined } ) }
panelId={ clientId }
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Drop cap' ) }
checked={ !! dropCap }
onChange={ () =>
setAttributes( { dropCap: ! dropCap } )
}
help={ helpText }
disabled={
hasDropCapDisabled( align ) ? true : false
}
/>
</ToolsPanelItem>
</InspectorControls>
) }
<InspectorControls group="typography">
<DropCapControl
clientId={ clientId }
attributes={ attributes }
setAttributes={ setAttributes }
/>
</InspectorControls>
<RichText
identifier="content"
tagName="p"
Expand Down

1 comment on commit dc95863

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in dc95863.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7179136319
📝 Reported issues:

Please sign in to comment.