Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FSE: Provide a way for Gutenberg to provide alignment styles for the front end. #26633

Closed
kjellr opened this issue Nov 2, 2020 · 5 comments
Closed
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Full Site Editing [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles [Type] Enhancement A suggestion for improvement.

Comments

@kjellr
Copy link
Contributor

kjellr commented Nov 2, 2020

At the moment, the largest boilerplate part of any block-based theme CSS is its alignment styles. Here's an example from Twenty Twenty-One Blocks:

https://github.com/WordPress/theme-experiments/blob/0984b1edf41d4d525c1d241b52423e21fc234e34/twentytwentyone-blocks/style.css#L35-L109

These styles are only present to mirror the default, wide, and full alignments that are present in the editor. In the editor, those styles are provided to themes by default. This should be the case for the front end as well.

@kjellr kjellr added [Type] Enhancement A suggestion for improvement. [Feature] Full Site Editing Global Styles CSS Styling Related to editor and front end styles, CSS-specific issues. labels Nov 2, 2020
@aristath
Copy link
Member

aristath commented Nov 3, 2020

These styles are only present to mirror the default, wide, and full alignments that are present in the editor. In the editor, those styles are provided to themes by default. This should be the case for the front end as well.

+1 to this. Getting layout & alignment styles correct for blocks is still one of the most complicated and underrated issues in themes dealing with blocks. FSE themes shouldn't have to reinvent the wheel every time, we should come up with some basic styles (maybe opt-in) so that theming becomes a bit easier.
Related: #25160 where I am attempting to do just that: figure out the bare minimum styles for block-based themes layouts.

@kjellr kjellr added the [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. label Nov 5, 2020
@oandregal oandregal mentioned this issue Nov 12, 2020
82 tasks
@mrwweb
Copy link

mrwweb commented Nov 13, 2020

I just want to note that there are two pretty different approaches to alignwide and alignfull I see.

  • Constrain the content width with a container and use negative margin and viewport-width units for alignwide and alignfull. Bill Erickson and Justin Tadlock both have good articles on this technique.
  • Constrain all content blocks with max-width and align with margin-left: auto; and margin-right: auto;. Adjust max-width for alignfull and alignwide. Justin Tadlock also covered this technique.

I mostly see people using the first technique. I prefer the second, and I think the linked article makes a good point about it's flexibility in a block-centric future where alignfull might not necessarily equal 100vw.

I'm not 100% sure what the implications of this are for this ticket, other than that it seems that it's only possible to provide one way or the other and so it should probably provide a way to opt-out of styles for people who want to use the other technique.

@kjellr
Copy link
Contributor Author

kjellr commented Nov 13, 2020

I think for the purposes of this issue, the goal would be to just replicate the method used in the editor (which is more or less the second bullet above).

From there, if a theme author wanted to re-write that for some reason, they could do so, and the same code would presumably work in both the editor and the front end.

@paaljoachim
Copy link
Contributor

In relation to these things talked about in the issue...
For instance boxed themes. Where the content is 80% with a white/grey background. 1px black border. Border radius to round all the content. An image background. I did a quick mockup to show what I mean.

Boxed-layout-border-border-radius

This shows a boxed layout.
Content is perhaps 80%.
Greyish content background color.
Content has a border color and border radius.
An individual page/post background image.

@scruffian
Copy link
Contributor

I think this closed by #29335.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Full Site Editing [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Development

No branches or pull requests

5 participants