I haven't tested this but, wouldn't this give information to screen readers in every render? I wonder if it'd be best to use this only when mounting the component. 🤔

I added logic to only speak when mounting the component.

Did you mean to use the fontSize in the FitTextSizeWarning component? It's not used right now.

Yah the font size prop is not needed, I removed it from the code.

The JSDoc above still says 5-600px

Good catch the comment was updated!

I tried the following: remove this HOC and make edit: ()=> null just edit: FixTextEdit. It didn't work. My understanding is that it doesn't because the useFitText clean up function removes the style when is unmounted.

With the edit approach, the edit export renders in the inspector panel, which is separate from the block:

  <Editor>
    ├── <BlockList>
    │     └── <Block clientId="abc">
    │           └── <BlockEdit />
    │
    └── <InspectorPanel>                    ← Only shows controls for selected block
          └── <BlockInspector>
                └── <FitTextEdit />         ← Mounted ONLY when block is selected
                      └── useFitText() runs

but when the block is unselected:

  <Editor>
    ├── <BlockList>
    │     └── <Block clientId="abc">
    │           └── <BlockEdit />
    │
    └── <InspectorPanel>
          └── (empty or different block's controls)
                                            ← FitTextEdit UNMOUNTED
                                            ← useEffect cleanup runs
                                            ← Style element removed

However, the HOC approach works because FixTextEdit is always part of the block render tree:

  <Editor>
    └── <BlockList>
          └── <Block clientId="abc">                    ← Always mounted while block exists
                └── <withFitTextEdit>                   ← HOC wrapper
                      ├── <BlockEdit />                 ← The actual block UI
                      └── <FitTextEdit />               ← Always mounted when fitText=true
                            └── useFitText() runs
                            └── returns warning UI only if isSelected

I reckon I'm a bit rusty after a few years not working with block supports, so wanted to document my understanding in case I've missed something.

Hi @oandregal, edit: FixTextEdit, does not work because it only renders when the block is selected, and for fit text even if the block is not selected we may need to recompute the font size, because for example the container width may have changed.

I found this arrangement a bit confusing, even though I understand that the motivation is to ensure useFitText is only called when needed. Thinking about clearer ways to express this, how about:

Encapsulate the hook calling in a HoC:

function WithFitTextFontSize( { fitText, name, clientId, children } ) {
	const { fontSize } = useFitText( { fitText, name, clientId } );
	return children( fontSize );
}

Render FitTextControl in both branches, but with the HoC mediating the font-size computation:

		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 && (
					<FitTextControl
						clientId={ clientId }
						fitText={ fitText }
						setAttributes={ setAttributes }
						name={ name }
						fontSize={ attributes.fontSize }
						style={ attributes.style }
					/>
				) }
			</>
		);

This way, the reader immediately sees what gets rendered and no longer needs to keep in mind the difference between FitTextControl and FitTextEdit.

If this sounds like an improvement, I can push to a new branch — @jorgefilipecosta @oandregal

Hi @mcsf this sounds like a code clarity improvement 👍, feel free to push the changes or let me know and I can also do it.

→ #74350 :)

In my testing, this felt way too low. Why 6? It feels to me like anything below 12px should raise a warning. Definitely below 10px, but most likely below 12px. No? @jorgefilipecosta

Good questions, 6px is being used because the previous minimum possible size was 6px, so this PR removed the minimum but added a warning for values that previously were not possible. Off-course we can reconsider a better value, 12px sounds good to me.