Increased Icon and Font Size for Better Visibility

[densinakum]

​https://wordpress.org/blocks/

The Blocks page previously had a very small icon and font size, which made it less noticeable and affected the overall design. I have updated the menu by increasing both the icon size and the font size. This change was necessary to enhance visibility and provide a better user experience from both a visitor’s and a design perspective.

Before ​https://prnt.sc/G8Q-MihMzzoz
After ​https://prnt.sc/bSn_JXptLYYU

wp-block-image img {
    width: 30px !important;
    height: 30px !important;
}

p.has-extra-small-font-size {
    font-size: 14px !important;
}

[densinakum]

Before ​https://prnt.sc/Jh6aAwrAS_xf

After ​https://prnt.sc/dj6VYUSHZDEF

[densinakum]

[​​https://wordpress.org/blocks/]

The Blocks page previously had a very small icon and font size, which made it less noticeable and affected the overall design. I have updated the menu by increasing both the icon size and the font size. This change was necessary to enhance visibility and provide a better user experience from both a visitor’s and a design perspective.

Before ​https://www.awesomescreenshot.com/image/58044918?key=f4f32adf83b325272a9a42d3bab33c46
After ​https://www.awesomescreenshot.com/image/58044968?key=76c874428616ea1f6ff8bdaacea7c73f

wp-block-image img {
    width: 30px !important;
    height: 30px !important;
}

p.has-extra-small-font-size {
    font-size: 14px !important;
}

[dd32]

@densinakum In future please consider uploading screenshots to the ticket, as the images linked do not load for me.

The suggested 30px CSS rule appears invalid, as it's not scoped to any specific section, and if it's for what I think it is, the source images are 48px (rendered as 24px).

The suggested font-size change should also be handled through theme.json I believe, as it's currently sourced from --wp--preset--font-size--extra-small.

[sabernhardt]

Blocks page icon grid with Extra Small text

[sabernhardt]

I agree that the text is unnecessarily small, but the CSS should not need to be edited (either directly or with JSON).

The Small preset is already 14px, which would be better than using the 12px Extra Small preset. Extra Small might have been chosen to keep two rows of four columns when the screen size is narrower than 360 pixels. If the text size is changed to Small, the word "Paragraph" pushes one Group block to the next row and shifts the next four Group blocks too. That theoretically could be fixed by reducing or removing the left and right padding of the Group block for the "Paragraph" icon and text.

The images are either 49 by 48 or 48 by 48 and resized to a 24-pixel square, and the editor sizes its SVG icons to 24 pixels in the block toolbar. This page's PNG images could be larger than what the editor shows, but 24 pixels is appropriate.

[sabernhardt]

Extra Small text (current), at 320 pixels wide

[sabernhardt]

increasing the font size to the Small preset, before adjusting padding, at 320 pixels wide