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

Try adding "Stewart", a light blogging theme with a sidebar #4369

Merged
merged 50 commits into from
Dec 15, 2021

Conversation

kjellr
Copy link
Contributor

@kjellr kjellr commented Aug 5, 2021

This is a light Blockbase spinoff for blogging that includes a left sidebar. Still needs a little light polish (and a bunch of testing?), but it seems to work generally well as a block-based theme given the small amount of effort I've put into it. It's named "Stewart", after @ianstewart (who asked us to make a blogging theme with a sidebar).

Screenshot

new-theme

@kjellr
Copy link
Contributor Author

kjellr commented Aug 5, 2021

I kept the left sidebar content really simple for now, so that this could theoretically work as a universal theme pretty easily. It just contains a navigation block (which we already have working for Quadrat for example), and the social links block. (Do we have a way to make a social nav work in both classic themes and block themes?).

That said, to make this a truly customizable universal sidebar theme we'd probably need to figure out a way to let non-FSE folks customize the sidebar with widgets. 😬

@ianstewart
Copy link
Contributor

Let me know when you need a beta tester. I'll switch up my blog on WordPress.com. I have to use this theme now. :)

@scruffian
Copy link
Member

I wonder if we can use a "widget area" block to achieve this.

@kjellr
Copy link
Contributor Author

kjellr commented Aug 12, 2021

Spent some time today making this a bit more of a "theme" and less of a blank starting point. I changed the colors and font, added a screenshot, and tidied up the templates.

Before After
stewart-old stewart-new

@kjellr
Copy link
Contributor Author

kjellr commented Dec 6, 2021

Just a heads up that I've gone in and pushed a few commits to start separating this out from Blockbase. It should work just fine as a standalone block theme now, though there are some spacing inconsistencies and likely a few unnecessary theme.json styles.

cc @jeffikus @scruffian

@kjellr
Copy link
Contributor Author

kjellr commented Dec 6, 2021

Known issues:

  • Needs a font loading implementation.
  • Needs theme.json to be pruned of blockbase-only keys.
  • Needs consistent top spacing for all templates.
  • Needs to show all pages by default in the sidebar nav area.
  • Figure out why the background color doesn't appear on the frontend.

@kjellr kjellr self-assigned this Dec 9, 2021
@kjellr kjellr added this to the Stewart milestone Dec 9, 2021
@scruffian
Copy link
Member

Yeah, this is not ideal. I just pushed a quick fix that uses a custom classname and makes those columns 100% wide on small screens. Should be fine until that issue is addressed.

I'm concerned about doing this in CSS as it means that this block behaves differently to other column blocks. The feedback we've had in the past about using CSS is "CSS should not be used for structural changes".

@scruffian
Copy link
Member

We should explore adding our Google font stack to this...

@kjellr
Copy link
Contributor Author

kjellr commented Dec 9, 2021

I'm concerned about doing this in CSS as it means that this block behaves differently to other column blocks. The feedback we've had in the past about using CSS is "CSS should not be used for structural changes".

Yeah, I agree. But I think this is mostly harmless? I don't feel strongly, so I'm happy to strip it out and let the editor do its wrong thing for now. If the columns are 50/50 on tablets for now, I don't consider it a blocker. (EDIT: Reverted for now in 3fa0b28)

We should explore adding our Google font stack to this...

Yeah, probably through a plugin and/or some dotcom functionality though, so it can be re-used. Doesn't make sense to add that into every single theme.

@pbking
Copy link
Contributor

pbking commented Dec 10, 2021

This theme is completely crashing for me right now. Can't figure out why. No errors just a completely empty html payload.

Just this theme. Not sure what's up.

@skorasaurus
Copy link

skorasaurus commented Dec 11, 2021

Yeah, probably through a plugin and/or some dotcom functionality though, so it can be re-used. Doesn't make sense to add that into every single theme.

I ran into it; requested at WordPress/gutenberg#34752 with some short-term workarounds for it.

@kjellr
Copy link
Contributor Author

kjellr commented Dec 13, 2021

This theme is completely crashing for me right now. Can't figure out why. No errors just a completely empty html payload.

Just this theme. Not sure what's up.

That's odd — @pbking what WP + Gutenberg version are you running? It's working fine for me w/Gutenberg 12.1 & WP 5.8.2.

@pbking
Copy link
Contributor

pbking commented Dec 13, 2021

I was using Gutenberg 12.0.1 and WP 5.8.2
Testing again with Gutenber /trunk and the theme is working again. So something to do with that slightly older version of Gutenberg I suppose...

Regardless it's working for me now.

@kjellr
Copy link
Contributor Author

kjellr commented Dec 13, 2021

Do you folks think this is in a decent-enough place where we can merge it in and get it up on dotcom for testing?

stewart/theme.json Outdated Show resolved Hide resolved
stewart/style.css Outdated Show resolved Hide resolved
@scruffian
Copy link
Member

The main problem I see is that when I customize colors they don't all get changed:
Screenshot 2021-12-14 at 11 10 01

@kjellr
Copy link
Contributor Author

kjellr commented Dec 14, 2021

@scruffian I've adjusted what I can, but some of this I think is just an issue with Global Styles. You used to be able to edit the "Primary" color, but that's not possible anymore (unless I'm missing something?).

@scruffian
Copy link
Member

Yeah that's what I was noticing too. Seems like we might need to open a Gutenberg issue for that as it's going to be a bit of a blocker...

@kjellr
Copy link
Contributor Author

kjellr commented Dec 14, 2021

@scruffian It's still there actually, I think we both actually just overlooked this control:
colors

Copy link
Member

@scruffian scruffian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case I say LGTM

@kjellr
Copy link
Contributor Author

kjellr commented Dec 15, 2021

Awesome. I'll leave this up to you folks to merge and deploy. 👍

@pbking pbking merged commit 48b3271 into trunk Dec 15, 2021
@kjellr kjellr deleted the try/add-stewart-theme branch December 15, 2021 18:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants