Directory

Sidebar: Improvements · Issue #528 · WordPress/twentytwentyfour · GitHub
Skip to content
This repository has been archived by the owner on Jan 24, 2024. It is now read-only.

Sidebar: Improvements #528

Closed
beafialho opened this issue Sep 28, 2023 · 6 comments · Fixed by #538
Closed

Sidebar: Improvements #528

beafialho opened this issue Sep 28, 2023 · 6 comments · Fixed by #538
Assignees
@MaggieCabrera

Comments

@beafialho
Copy link

The sidebar appearance isn't currently looking as refined as it should, both on desktop as on mobile. From my testing, this seems to be related with the use of the font size and spacing presets. On desktop, they look too big/spaced out. On mobile too small/tight. Here's how it is looking:

sidebar.mp4

Because of this, I rethought this section, included different blocks, perhaps even more relevant than a repeated query loop, since we'll have posts on the left. I set the headings to 1,6rem and the outer group block spacing to 36px. In the stacks, I used 16px between the heading and content. The result is instantly more harmonious:

Captura de ecrã 2023-09-28, às 16 47 21 Captura de ecrã 2023-09-28, às 16 47 52

I was also going to ask if we can remove the dots in the categories as they add extra visual noise. Ideally the sidebar would look like the following screenshots:

Captura de ecrã 2023-09-28, às 17 06 09

Here's the markup which in this case is very relevant to look at:

<!-- wp:group {"style":{"spacing":{"blockGap":"36px","padding":{"right":"0","left":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="padding-right:0;padding-left:0"><!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0"><!-- wp:avatar {"size":80,"style":{"border":{"radius":"16px"}}} /-->

<!-- wp:group {"style":{"spacing":{"blockGap":"16px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"fontSize":"1.6rem"}}} -->
<h2 class="wp-block-heading" style="font-size:1.6rem">About the author</h2>
<!-- /wp:heading -->

<!-- wp:post-author-biography {"fontSize":"small"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:separator {"backgroundColor":"base-3","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-base-3-color has-alpha-channel-opacity has-base-3-background-color has-background is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:group {"style":{"spacing":{"blockGap":"16px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"fontSize":"1.6rem"}}} -->
<h2 class="wp-block-heading" style="font-size:1.6rem">Popular Categories</h2>
<!-- /wp:heading -->

<!-- wp:categories {"showHierarchy":true,"showPostCounts":true,"fontSize":"small"} /--></div>
<!-- /wp:group -->

<!-- wp:separator {"backgroundColor":"base-3","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-base-3-color has-alpha-channel-opacity has-base-3-background-color has-background is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:group {"style":{"spacing":{"blockGap":"26px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"16px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"fontSize":"1.6rem"}}} -->
<h2 class="wp-block-heading" style="font-size:1.6rem">Useful Links</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Links I found useful and wanted to share.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:navigation {"ref":612,"overlayMenu":"never","layout":{"type":"flex","orientation":"vertical"},"style":{"typography":{"fontStyle":"normal","fontWeight":"400","textDecoration":"underline"},"spacing":{"blockGap":"var:preset|spacing|10"}},"fontSize":"small"} /--></div>
<!-- /wp:group -->

<!-- wp:separator {"backgroundColor":"base-3","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-base-3-color has-alpha-channel-opacity has-base-3-background-color has-background is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:group {"style":{"spacing":{"blockGap":"16px"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"fontSize":"1.6rem"}}} -->
<h2 class="wp-block-heading" style="font-size:1.6rem">Search the website</h2>
<!-- /wp:heading -->

<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search...","width":100,"widthUnit":"%","buttonText":"Search"} /--></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"var:preset|spacing|10"} -->
<div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->
@MaggieCabrera
Copy link
Collaborator

I wonder if we should add the little arrows as a block style

@beafialho
Copy link
Author

I think that would be great.

@MaggieCabrera
Copy link
Collaborator

I'm gonna work on this

@MaggieCabrera MaggieCabrera self-assigned this Sep 29, 2023
@MaggieCabrera
Copy link
Collaborator

I've been thinking about this and checking the behaviour of our spacing presets in this particular instance and I'm inclined to agree that we need static values in this particular case (though I would change the units to rem instead of pixels).

The reason for this is that the sidebar is already narrow on desktop, and the spacing between elements should stay the same throughout any viewport sizing. Using the preset 40 makes sense in desktop because it translates to 64px, but on mobile it goes to almost half that, when the font sizes are not really changing that much, and the width of the area is still the same, so it looks really cramped like Bea shows in her video.

@MaggieCabrera
Copy link
Collaborator

This looks like a case for container queries, but of course it shouldn't be something the theme needs to handle itself, since that can't translate to theme swaping

@MaggieCabrera
Copy link
Collaborator

I talked to Rich about this and we came to an agreement that this particular case it's ok to have fixed values instead of presets because of the reasons outlined above. There's no way to make this look good on mobile with our flexible presets and we don't want to make them static for the rest of the instances where they are used.

@MaggieCabrera MaggieCabrera mentioned this issue Oct 2, 2023
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@MaggieCabrera MaggieCabrera

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add enhancements to the sidebar WordPress/twentytwentyfour
2 participants
@MaggieCabrera @beafialho