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: Blockbase standalone theme #5660

Merged
merged 13 commits into from
Mar 17, 2022
Merged

Try: Blockbase standalone theme #5660

merged 13 commits into from
Mar 17, 2022

Conversation

MaggieCabrera
Copy link
Contributor

Changes proposed in this Pull Request:

Following on our conversations about what kind of theme could be used as a starter for other teams that want to build Block themes but want a solid foundation instead of doing it from scratch, I quickly built this version of Blockbase that only has the basics as a standalone theme.

Who is this theme for?

Someone who doesn't want to start from 0 and wants the basics in terms of visual structure to tweak and move without a massive boilerplate and relying 100% on FSE. Most probably someone who isn't 100% familiar with all that theme.json and FSE can do and doesn't want to miss something along the way.

How should one use this theme?

I think this theme is best used if you fork it and build on top of it. I don't think it makes sense to use it as a parent theme, it adds no functionality or a heavy stylistic foundation that you'd want to keep.

This theme includes:

  • No customizer stuff or any other "Universal" functionality.
  • No CSS ponyfills besides the alignments styles and I think I added the search + file blocks fix.
  • No block patterns besides the 404 one for i18n purposes. I added it to the patterns folder and tried to implement it using Block Patterns: Automatically load headered files from a theme's /patterns directory WordPress/gutenberg#36751 but looks like it's not working with the block pattern block! we can wait that one out or implement the pattern the old way as we see fit.
  • Same design as Blockbase (typography, spacing, colors, block settings...)
  • Same templates as Blockbase.

Please do forgive the horrible naming. It feels like a running joke already with the starter themes.

It looks like this:

Screenshot 2022-03-14 at 18-32-23 Skatepark – Tagline

@MaggieCabrera MaggieCabrera self-assigned this Mar 14, 2022
@pbking
Copy link
Contributor

pbking commented Mar 14, 2022

I think it's a great idea, it seems like a good starting place for a Block Theme.

I think that we should consider adding more things from ponyfill. Doing so may make this a decent parent theme allowing for those ponyfills to ultimately go away in one place instead of all the themes that might have cloned it. Things like navigation styling and button hover states that still needs a ponyfill of some kind to work; standardizing the "Blockbase" way seems a good way to do that.

Edit: Yea I get carried away thinking about child themes sometimes. I agree with comments below, this is a better tool to be used instead of "empty theme" to get started with rather than a parent theme to derive from.

"elements": {
"h1": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--heading-font)",
Copy link
Member

Choose a reason for hiding this comment

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

I think all the shared headings definitions can live under a headings property.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

looks like we have on remote under styles/elements/headings but it doesn't seem to be working! do you remember how to do that?

@MaggieCabrera
Copy link
Contributor Author

I think that we should consider adding more things from ponyfill. Doing so may make this a decent parent theme allowing for those ponyfills to ultimately go away in one place instead of all the themes that might have cloned it. Things like navigation styling and button hover states that still needs a ponyfill of some kind to work; standardizing the "Blockbase" way seems a good way to do that.

I think then why not use Blockbase then? I didn't want to add any of the extras because I wanted this to be as close to a clean slate as possible. CSS in any case is bringing a maintenance burden and this one is not meant to be a parent theme that we will update and other themers can just build children and always get the latest code, but as a starting point for someone to build something new. It's meant to bring a base of what a block theme can include, nothing more (without looking terrible like emptytheme).

In fact, now I think I just need to remove everything that's not CSS alignments! And I'm keeping those because else it looks really bad.

Copy link
Member

@mikachan mikachan left a comment

Choose a reason for hiding this comment

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

This is a great idea; I love that it's another option for themers to use as a starting point, and it's a great introduction to block themes.

I think we should add a readme file similar to the one we have for Blockbase, to help people understand when/why they could use either theme.

I also think the name is great 😁

block-canvas/style.css Outdated Show resolved Hide resolved
block-canvas/theme.json Outdated Show resolved Hide resolved
pbking and others added 3 commits March 15, 2022 11:38
To use `php create.php` and answer the prompts.
This will create a folder alongside this theme with the provided
metadata as well as namespaced attributes refactored.
@MaggieCabrera
Copy link
Contributor Author

I'm trying to make this theme work with WordPress/gutenberg#36751 for the 404 pattern but I'm having no luck, can any of you 👀 to see if the pattern works with the GB PR? maybe it's my env?

@MaggieCabrera
Copy link
Contributor Author

MaggieCabrera commented Mar 17, 2022

I think I have done all the suggested changes, should we bring this in to use as a starter with the create plugin ourselves? I think development of Pendant will inform any adjustments that we might want to make to this theme and we can iterate as we go.

I'd add it to gitignore on dotcom if we merge, though!

@mikachan
Copy link
Member

should we bring this in to use as a starter with the create plugin ourselves?

Sounds good to me!

@MaggieCabrera MaggieCabrera merged commit 204a35e into trunk Mar 17, 2022
@scruffian scruffian deleted the try-block-canvas branch March 17, 2022 11:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants