Fix Typography panel rendering from style hooks #22605
Conversation
This update fixes the Typography sidebar panel rendering, specifically if line-height/font-size style properties are disabled. The Typography panel will no longer render if it does not contain any style controls.
ItsJonQ
added
[Type] Bug
|
Size Change: +10.1 kB (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Hi @ItsJonQ,
I used the following code to disable font size and line-height picking:
function disable_typography() {
add_theme_support( 'disable-custom-line-height' );
add_theme_support( 'disable-custom-font-sizes' );
add_theme_support( 'editor-font-sizes', array() );
}
add_action( 'after_setup_theme', 'disable_typography' );
But the Typography panel still appeared (empty). I guess the panel should not appear at all. Do we have a bug, or I'm missing something in my tests?
| <LineHeightEdit { ...props } /> | ||
| </> | ||
| ); | ||
| const hasContent = !! contentMarkup; |
There was a problem hiding this comment.
Would this be always true?
There was a problem hiding this comment.
🤦 Indeed. I think I had a false positive in my testing due to local Docker issues
Thanks for the heads up!
|
@youknowriad + @jorgefilipecosta Thanks for the feedback! I'm currently attempting to test + fix. My local 🐳 Docker environment is having some problems 🙃 Will update as soon as I can! |
|
(I was able to get Docker behaving again) @jorgefilipecosta I had a quick question re: It doesn't seem to work for me 🤔 I'm getting an array of the 5 default sizes when I do this: const { fontSizes } = useSelect( ( select ) =>
select( 'core/block-editor' ).getSettings()
);As an aside... Originally, I wanted the TypographyPanel to be less involved in tracking either its internal elements need to appear or not (and render accordingly). However, based on deeper exploration, I'm not sure if that can happen. To hide the panel, I think the TypographyPanel needs to check...
|
Could you search for editor-font-sizes in your theme folder? Maybe your theme is defining a set of font sizes in some place of the code? I think it would also be good to run the support after theme setup something like: |
|
In the "mu-plugins" loaded in the default wp-env, there's one plugin that resets the colors and font sizes I think. |
|
@jorgefilipecosta + @youknowriad Hmm 🤔 I tried using an older theme (Twenty Eleven). I've added the disable hook at the end of the
These are the only plugins I can see that are active 😊 . How may I locate this (Apologies in advance for the hassle 🙏 ) |
|
@ItsJonQ There's a "Must-use" link at the top of your screenshot, you'll see them there. Or alternatively, there's a file called |
|
@youknowriad Ah! Thank you 🙏 |
|
@youknowriad + @jorgefilipecosta Haiii :D I just pushed up a change which I think should work. However, I'm still having trouble with the I can't seem to make the I located the I was able to disable line height + custom font sizes. However, I'm not able to remove (or even add) font sizes 🤔 For example, this doesn't seem to work for me: add_theme_support( 'editor-font-sizes', array(
array(
'name' => 'Small',
'size' => 12,
'slug' => 'small'
),
) );Any insight would be helpful 🙏 ! |
|
@youknowriad Bumping for visibility 😊 |
|
Maybe I'm doing something wrong but I can't get the line height to disappear |
|
@youknowriad Ah! Thank you for following up. It looks like the line-height disable checking logic was using: rather than: I made the update and pushed it up! |
|
Sorry wrong click. So, now the link control is gone but the typography panel remains empty. |
|
@youknowriad Thank you for re-checking! I was able to test and get things working. I pushed up a fix. Previously, I think I was getting false results because of my Docker environment. I reset some things this week, and it seemed be working okay. |
|
@youknowriad Thank you 🙏 |
This update fixes the Typography sidebar panel rendering, specifically if line-height/font-size style properties are disabled.
The Typography panel will no longer render if it does not contain any style controls.
How has this been tested?
This has been tested locally within Gutenberg.
Run
npm run devAdd
add_theme_support( 'disable-custom-line-height' )to your theme'sfunction.phpAdd a Paragraph block
Typography panel should still render, but without line height controls
Remove font-sizes for Paragraph and/or Heading block
Refresh
Ensure that there is no Typography panel
Screenshots
Types of changes
hooks/that handles the rendering of typography style controlsChecklist:
Resolves: #22602