Skip to content

Commit 6d7fe42

Browse files
t-hamanocarolinanjoedolson
authored
Stretchy Text: Fix focus loss (#75092)
Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: joedolson <joedolson@git.wordpress.org>
1 parent 6873510 commit 6d7fe42

2 files changed

Lines changed: 74 additions & 88 deletions

File tree

‎packages/block-editor/src/components/fit-text-size-warning/style.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
@use "@wordpress/base-styles/variables" as *;
22

33
.block-editor-fit-text-size-warning {
4-
margin: $grid-unit-10 0 0 0;
5-
6-
.components-notice__content {
7-
margin-right: 0;
8-
}
4+
grid-column: span 2;
95
}

‎packages/block-editor/src/hooks/fit-text.js‎

Lines changed: 73 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -232,14 +232,13 @@ function useFitText( { fitText, name, clientId } ) {
232232
/**
233233
* Fit text control component for the typography panel.
234234
*
235-
* @param {Object} props Component props.
236-
* @param {string} props.clientId Block client ID.
237-
* @param {Function} props.setAttributes Function to set block attributes.
238-
* @param {string} props.name Block name.
239-
* @param {boolean} props.fitText Whether fit text is enabled.
240-
* @param {string} props.fontSize Font size slug.
241-
* @param {Object} props.style Block style object.
242-
* @param {React.JSX.Element} props.warning Warning component to display.
235+
* @param {Object} props Component props.
236+
* @param {string} props.clientId Block client ID.
237+
* @param {Function} props.setAttributes Function to set block attributes.
238+
* @param {string} props.name Block name.
239+
* @param {boolean} props.fitText Whether fit text is enabled.
240+
* @param {string} props.fontSize Font size slug.
241+
* @param {Object} props.style Block style object.
243242
*/
244243
export function FitTextControl( {
245244
clientId,
@@ -248,56 +247,52 @@ export function FitTextControl( {
248247
name,
249248
fontSize,
250249
style,
251-
warning,
252250
} ) {
253251
if ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
254252
return null;
255253
}
256254
return (
257-
<InspectorControls group="typography">
258-
<ToolsPanelItem
259-
hasValue={ () => fitText }
255+
<ToolsPanelItem
256+
hasValue={ () => fitText }
257+
label={ __( 'Fit text' ) }
258+
onDeselect={ () => setAttributes( { fitText: undefined } ) }
259+
resetAllFilter={ () => ( { fitText: undefined } ) }
260+
panelId={ clientId }
261+
>
262+
<ToggleControl
260263
label={ __( 'Fit text' ) }
261-
onDeselect={ () => setAttributes( { fitText: undefined } ) }
262-
resetAllFilter={ () => ( { fitText: undefined } ) }
263-
panelId={ clientId }
264-
>
265-
<ToggleControl
266-
label={ __( 'Fit text' ) }
267-
checked={ fitText }
268-
onChange={ () => {
269-
const newFitText = ! fitText || undefined;
270-
const updates = { fitText: newFitText };
271-
272-
// When enabling fit text, clear font size if it has a value
273-
if ( newFitText ) {
274-
if ( fontSize ) {
275-
updates.fontSize = undefined;
276-
}
277-
if ( style?.typography?.fontSize ) {
278-
updates.style = {
279-
...style,
280-
typography: {
281-
...style?.typography,
282-
fontSize: undefined,
283-
},
284-
};
285-
}
264+
checked={ fitText }
265+
onChange={ () => {
266+
const newFitText = ! fitText || undefined;
267+
const updates = { fitText: newFitText };
268+
269+
// When enabling fit text, clear font size if it has a value
270+
if ( newFitText ) {
271+
if ( fontSize ) {
272+
updates.fontSize = undefined;
273+
}
274+
if ( style?.typography?.fontSize ) {
275+
updates.style = {
276+
...style,
277+
typography: {
278+
...style?.typography,
279+
fontSize: undefined,
280+
},
281+
};
286282
}
287-
288-
setAttributes( updates );
289-
} }
290-
help={
291-
fitText
292-
? __( 'Text will resize to fit its container.' )
293-
: __(
294-
'The text will resize to fit its container, resetting other font size settings.'
295-
)
296283
}
297-
/>
298-
{ warning }
299-
</ToolsPanelItem>
300-
</InspectorControls>
284+
285+
setAttributes( updates );
286+
} }
287+
help={
288+
fitText
289+
? __( 'Text will resize to fit its container.' )
290+
: __(
291+
'The text will resize to fit its container, resetting other font size settings.'
292+
)
293+
}
294+
/>
295+
</ToolsPanelItem>
301296
);
302297
}
303298

@@ -358,14 +353,27 @@ const hasFitTextSupport = ( blockNameOrType ) => {
358353
return hasBlockSupport( blockNameOrType, FIT_TEXT_SUPPORT_KEY );
359354
};
360355

361-
/*
362-
* Helper to encapsulate calls to the relatively expensive `useFitText` hook.
363-
* Used in `addFitTextControl` so that the hook is only called when a block's
364-
* `fitText` attribute is set.
356+
/**
357+
* Component that handles the fit text font size and displays a warning
358+
* if the fit text font size is below a minimum threshold.
359+
*
360+
* @param {Object} props Component props.
361+
* @param {boolean} props.fitText Whether fit text is enabled.
362+
* @param {string} props.name Block name.
363+
* @param {string} props.clientId Block client ID.
364+
* @param {boolean} props.isSelected Whether the block is selected.
365+
* @return {Element|null} Warning component or null.
365366
*/
366-
function WithFitTextFontSize( { fitText, name, clientId, children } ) {
367+
function FitTextFontSize( { fitText, name, clientId, isSelected } ) {
367368
const { fontSize } = useFitText( { fitText, name, clientId } );
368-
return children( fontSize );
369+
if ( isSelected && fontSize && fontSize < MIN_FONT_SIZE_FOR_WARNING ) {
370+
return (
371+
<InspectorControls group="typography">
372+
<FitTextSizeWarning />
373+
</InspectorControls>
374+
);
375+
}
376+
return null;
369377
}
370378

371379
/*
@@ -385,33 +393,7 @@ const addFitTextControl = createHigherOrderComponent( ( BlockEdit ) => {
385393
return (
386394
<>
387395
<BlockEdit { ...props } />
388-
{ fitText && (
389-
<WithFitTextFontSize
390-
fitText={ fitText }
391-
name={ name }
392-
clientId={ clientId }
393-
>
394-
{ ( fontSize ) =>
395-
isSelected && (
396-
<FitTextControl
397-
clientId={ clientId }
398-
fitText={ fitText }
399-
setAttributes={ setAttributes }
400-
name={ name }
401-
fontSize={ attributes.fontSize }
402-
style={ attributes.style }
403-
warning={
404-
fontSize <
405-
MIN_FONT_SIZE_FOR_WARNING && (
406-
<FitTextSizeWarning />
407-
)
408-
}
409-
/>
410-
)
411-
}
412-
</WithFitTextFontSize>
413-
) }
414-
{ ! fitText && isSelected && (
396+
<InspectorControls group="typography">
415397
<FitTextControl
416398
clientId={ clientId }
417399
fitText={ fitText }
@@ -420,6 +402,14 @@ const addFitTextControl = createHigherOrderComponent( ( BlockEdit ) => {
420402
fontSize={ attributes.fontSize }
421403
style={ attributes.style }
422404
/>
405+
</InspectorControls>
406+
{ fitText && (
407+
<FitTextFontSize
408+
fitText={ fitText }
409+
name={ name }
410+
clientId={ clientId }
411+
isSelected={ isSelected }
412+
/>
423413
) }
424414
</>
425415
);

0 commit comments

Comments
 (0)