Skip to content

Stretchy Text: Fix focus loss #75092

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
t-hamano merged 2 commits into from
Mar 20, 2026
Merged

Stretchy Text: Fix focus loss #75092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05d44c7
Stretchy Text: Fix focus loss
t-hamano Jan 30, 2026
94fa461
Merge branch 'trunk' into fix/fit-text-focus-loss
t-hamano Mar 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions packages/block-editor/src/components/fit-text-size-warning/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
@use "@wordpress/base-styles/variables" as *;

.block-editor-fit-text-size-warning {
margin: $grid-unit-10 0 0 0;

.components-notice__content {
margin-right: 0;
}
grid-column: span 2;
}
156 changes: 73 additions & 83 deletions packages/block-editor/src/hooks/fit-text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,14 +232,13 @@ function useFitText( { fitText, name, clientId } ) {
/**
* Fit text control component for the typography panel.
*
* @param {Object} props Component props.
* @param {string} props.clientId Block client ID.
* @param {Function} props.setAttributes Function to set block attributes.
* @param {string} props.name Block name.
* @param {boolean} props.fitText Whether fit text is enabled.
* @param {string} props.fontSize Font size slug.
* @param {Object} props.style Block style object.
* @param {React.JSX.Element} props.warning Warning component to display.
* @param {Object} props Component props.
* @param {string} props.clientId Block client ID.
* @param {Function} props.setAttributes Function to set block attributes.
* @param {string} props.name Block name.
* @param {boolean} props.fitText Whether fit text is enabled.
* @param {string} props.fontSize Font size slug.
* @param {Object} props.style Block style object.
*/
export function FitTextControl( {
clientId,
Expand All @@ -248,56 +247,52 @@ export function FitTextControl( {
name,
fontSize,
style,
warning,
} ) {
if ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
return null;
}
return (
<InspectorControls group="typography">
<ToolsPanelItem
hasValue={ () => fitText }
<ToolsPanelItem
hasValue={ () => fitText }
label={ __( 'Fit text' ) }
onDeselect={ () => setAttributes( { fitText: undefined } ) }
resetAllFilter={ () => ( { fitText: undefined } ) }
panelId={ clientId }
>
<ToggleControl
label={ __( 'Fit text' ) }
onDeselect={ () => setAttributes( { fitText: undefined } ) }
resetAllFilter={ () => ( { fitText: undefined } ) }
panelId={ clientId }
>
<ToggleControl
label={ __( 'Fit text' ) }
checked={ fitText }
onChange={ () => {
const newFitText = ! fitText || undefined;
const updates = { fitText: newFitText };

// When enabling fit text, clear font size if it has a value
if ( newFitText ) {
if ( fontSize ) {
updates.fontSize = undefined;
}
if ( style?.typography?.fontSize ) {
updates.style = {
...style,
typography: {
...style?.typography,
fontSize: undefined,
},
};
}
checked={ fitText }
onChange={ () => {
const newFitText = ! fitText || undefined;
const updates = { fitText: newFitText };

// When enabling fit text, clear font size if it has a value
if ( newFitText ) {
if ( fontSize ) {
updates.fontSize = undefined;
}
if ( style?.typography?.fontSize ) {
updates.style = {
...style,
typography: {
...style?.typography,
fontSize: undefined,
},
};
}

setAttributes( updates );
} }
help={
fitText
? __( 'Text will resize to fit its container.' )
: __(
'The text will resize to fit its container, resetting other font size settings.'
)
}
/>
{ warning }
</ToolsPanelItem>
</InspectorControls>

setAttributes( updates );
} }
help={
fitText
? __( 'Text will resize to fit its container.' )
: __(
'The text will resize to fit its container, resetting other font size settings.'
)
}
/>
</ToolsPanelItem>
);
}

Expand Down Expand Up @@ -358,14 +353,27 @@ const hasFitTextSupport = ( blockNameOrType ) => {
return hasBlockSupport( blockNameOrType, FIT_TEXT_SUPPORT_KEY );
};

/*
* Helper to encapsulate calls to the relatively expensive `useFitText` hook.
* Used in `addFitTextControl` so that the hook is only called when a block's
* `fitText` attribute is set.
/**
* Component that handles the fit text font size and displays a warning
* if the fit text font size is below a minimum threshold.
*
* @param {Object} props Component props.
* @param {boolean} props.fitText Whether fit text is enabled.
* @param {string} props.name Block name.
* @param {string} props.clientId Block client ID.
* @param {boolean} props.isSelected Whether the block is selected.
* @return {Element|null} Warning component or null.
*/
function WithFitTextFontSize( { fitText, name, clientId, children } ) {
function FitTextFontSize( { fitText, name, clientId, isSelected } ) {
const { fontSize } = useFitText( { fitText, name, clientId } );
return children( fontSize );
if ( isSelected && fontSize && fontSize < MIN_FONT_SIZE_FOR_WARNING ) {
return (
<InspectorControls group="typography">
<FitTextSizeWarning />
</InspectorControls>
);
}
return null;
}

/*
Expand All @@ -385,33 +393,7 @@ const addFitTextControl = createHigherOrderComponent( ( BlockEdit ) => {
return (
<>
<BlockEdit { ...props } />
{ fitText && (
<WithFitTextFontSize
fitText={ fitText }
name={ name }
clientId={ clientId }
>
{ ( fontSize ) =>
isSelected && (
<FitTextControl
clientId={ clientId }
fitText={ fitText }
setAttributes={ setAttributes }
name={ name }
fontSize={ attributes.fontSize }
style={ attributes.style }
warning={
fontSize <
MIN_FONT_SIZE_FOR_WARNING && (
<FitTextSizeWarning />
)
}
/>
)
}
</WithFitTextFontSize>
) }
{ ! fitText && isSelected && (
<InspectorControls group="typography">
<FitTextControl
clientId={ clientId }
fitText={ fitText }
Expand All @@ -420,6 +402,14 @@ const addFitTextControl = createHigherOrderComponent( ( BlockEdit ) => {
fontSize={ attributes.fontSize }
style={ attributes.style }
/>
</InspectorControls>
{ fitText && (
<FitTextFontSize
fitText={ fitText }
name={ name }
clientId={ clientId }
isSelected={ isSelected }
/>
) }
</>
);
Expand Down
Loading