Gutenberg: Navigation Block: Text settings not working

Created on 18 Jun 2020  路  6Comments  路  Source: WordPress/gutenberg

Site Navigation block offers some Text settings in the sidebar, but they seem to have no effect on either editor or the front end.

To reproduce
Steps to reproduce the behavior:

  1. Add Navigation block to a post or a page.
  2. With the block selected scroll down in the sidebar to Text settings.
  3. Try different preset sizes. Notice the font-size is not being applied to the block.
  4. Preview the post/page. Note that the font-size is not being applied on the frontend of the site either.

This seems to be because of the following styles applied to the span element via .wp-block-navigation-link__label class, which override the theme styling:

.wp-block-navigation-link__label {
    font-size: 17px;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
    word-break: normal;
    overflow-wrap: break-word;
}

Screenshots
rrluEbZ6Oy

Editor version (please complete the following information):

  • WordPress version: 5.4.2
  • Gutenberg plugin: 8.3.0
  • Theme: TwentyTwenty v1.4
Needs Dev [Block] Navigation [Type] Bug

All 6 comments

@alaczek I couldn't find those text settings. It might be that they're provided by a plugin you have active?

Hmm, that is strange. I deactivated all plugins aside from Gutenberg, and still, those settings for Navigation block were available. Maybe we need a third pair of eyes :)

@talldan @alaczek I tested this and could see the text settings. You need to select the entire block in order to see these settings. Here's a video replicating this: https://cloudup.com/c2uXL_JKGfG

Of note, it's pretty confusing how different the block settings screen is when selecting the entire block vs when you are working within the block itself.

  • WordPress 5.4.2
  • Gutenberg 8.3.0
  • TwentyTwenty theme
  • No other plugins active

Removing the needs-testing tag!

Updating Default style will save your preference for future navigation blocks e.g. if you select dark and add one more navigation block it will be dark. I'm not sure this is the best place to be making this decision. I was confused as to what needs to happen and it took me some time to figure it out.

Thanks, I see it happening now 馃憤

Why is there a font family in the first place?
It should get this from the th猫me right?

Was this page helpful?
0 / 5 - 0 ratings