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: Define the minimum boilerplate code for a block-based theme #81

Merged
merged 26 commits into from
Dec 2, 2020

Conversation

kjellr
Copy link
Collaborator

@kjellr kjellr commented Nov 10, 2020

There's just a little bit of boilerplate necessary to build a block-based theme today. This PR tries to collect that all in one place.

assets
    alignments-front.css
block-templates
    index.html
experimental-theme.json
functions.php
index.php
style.css

Theoretically you could use this today as a base to build a theme from, but I gathered it mostly to start identifying the remaining pieces that (hopefully) Gutenberg can start handling automatically. I'll leave some code comments below.

Some of the add_theme_support declarations and the (mostly) empty experimental-theme.json file could technically be removed, but I kept them in for discussion purposes.

cc @jorgefilipecosta and @nosolosw for your thoughts.

@kjellr kjellr added the block-based theme A theme using HTML templates label Nov 10, 2020
@kjellr kjellr self-assigned this Nov 10, 2020
@@ -0,0 +1,79 @@
/*
Copy link
Collaborator Author

@kjellr kjellr Nov 10, 2020

Choose a reason for hiding this comment

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

This entire file could hopefully be dequeued and deleted once Gutenberg provides front-end alignments. WordPress/gutenberg#26633

"units": [ "px", "em", "rem", "vh", "vw" ]
}
},
"custom": {
Copy link
Collaborator Author

@kjellr kjellr Nov 10, 2020

Choose a reason for hiding this comment

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

These custom rules are only used in the alignments stylesheet above, so if that is removed, these could be removed too.

<?php

if ( ! function_exists( 'blockbase_support' ) ) :
function blockbase_support() {
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Many of these settings should either be activated by default for block-based themes, or available as theme.json options:

add_theme_support( 'align-wide' );
add_theme_support( 'wp-block-styles' );
add_theme_support( 'responsive-embeds' );
add_theme_support( 'experimental-link-color' );

Copy link
Collaborator

Choose a reason for hiding this comment

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

Is there an issue for this in Gutenberg?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I just opened WordPress/gutenberg#26901 to discuss.

@kjellr kjellr changed the title Try: The bare minimum of a working block-based theme Try: Define the bare minimum of a block-based theme Nov 10, 2020
@kjellr kjellr changed the title Try: Define the bare minimum of a block-based theme Try: Define the bare minimum code for a block-based theme Nov 10, 2020
/**
* Enqueue scripts and styles.
*/
function blockbase_scripts() {
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Just thinking out loud... if we can eliminate the add_theme_support calls above, this file would only exist to enqueue the stylesheets. Would it be possible to enqueue the stylesheets from within theme.json instead?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I've opened an issue here to discuss: WordPress/gutenberg#26902

@kjellr kjellr changed the title Try: Define the bare minimum code for a block-based theme Try: Define the minimum boilerplate code for a block-based theme Nov 10, 2020
emptytheme/experimental-theme.json Outdated Show resolved Hide resolved
emptytheme/experimental-theme.json Outdated Show resolved Hide resolved
emptytheme/experimental-theme.json Outdated Show resolved Hide resolved
emptytheme/functions.php Outdated Show resolved Hide resolved
@@ -0,0 +1,15 @@
/*
Theme Name: Empty Theme
Copy link
Member

Choose a reason for hiding this comment

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

Should we allow all this header information to be specified in theme.json? @aristath, @mtias, @nosolosw

It seems strange that we force a theme to have a CSS file. I guess a theme with just theme.json should be possible.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I was thinking the same. That would be nice.

Copy link
Member

Choose a reason for hiding this comment

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

The theme directory (and core as well) would need, what I assume, to be a pretty sizable overhaul to do away with the need to have any stylesheet.

Copy link
Member

Choose a reason for hiding this comment

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

Yeah, currently core detects themes from their style.css file. So if we want to allow these to be inside the theme.json file, a patch would have to be submitted to core at the same time so that these can be properly used.
I agree though, the stylesheet will in many cases be just a just file used to define the theme.

Copy link
Member

Choose a reason for hiding this comment

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

I guess as theme.json involves we should allow just a theme.json theme. But this change would touch many parts of our code and is not something essential. Also as we are I guess most themes will still need at least some lines of CSS code. But once theme.json expands having theme information there seems like a good path.

@MaggieCabrera
Copy link
Collaborator

We've been testing this PR this morning and found that featured images are not enabled by default 😃

We could add add_theme_support( 'post-thumbnails' ); to functions.php

The docs say:

To retain backward compatibility, add_theme_support declarations are retrofit in the proper categories.
If a theme uses add_theme_support('disable-custom-colors'), it’ll be the same as set global.settings.color.custom to false. If the experimental-theme.json contains any settings, these will take precedence over the values declared via add_theme_support.

But I tried to set global.settings.post.thumbnails = true on the json and it did nothing. I probably did it wrong.

@kjellr
Copy link
Collaborator Author

kjellr commented Nov 16, 2020

Thanks! I don't think this option exists yet for theme.json, so I've added it to the list in WordPress/gutenberg#26901.

For now, I've added the traditional add_theme_support( 'post-thumbnails' ); to functions.php.

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

Should we also include a simple homepage template that lists the posts as part of the minimum boilerplate?

emptytheme/functions.php Outdated Show resolved Hide resolved
@kjellr
Copy link
Collaborator Author

kjellr commented Nov 23, 2020

Should we also include a simple homepage template that lists the posts as part of the minimum boilerplate?

Yeah, we could — We'd technically need both an index.html and a singular.html template to make it all work right now. And since it's more than one template, then a header.html template part makes sense, to house the site title. 😄 It starts snowballing from there.

Without any templates, the theme doesn't technically work by default. So it probably makes sense to add in that baseline at least. I've added them in 2c6d4e1.

Copy link

@primenest primenest left a comment

Choose a reason for hiding this comment

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

what would the emptytheme/assets/block-template-parts file be used for?

@kjellr
Copy link
Collaborator Author

kjellr commented Nov 24, 2020

what would the emptytheme/assets/block-template-parts file be used for?

As of the last commit, that folder contains a reusable header template part. This is used at the top of the index.html and singular.html templates.

@mintplugins
Copy link

@kjellr Do you know if the plans to make the FSE HTML files into PHP files should be reflected here yet?

@kjellr
Copy link
Collaborator Author

kjellr commented Nov 24, 2020

Do you know if the plans to make the FSE HTML files into PHP files should be reflected here yet?

Not yet — this PR reflects the current state, not a planned future state.

Copy link
Collaborator

@jffng jffng left a comment

Choose a reason for hiding this comment

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

emptytheme/assets/block-template-parts is an empty file that I think was accidentally created and checked in?

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@@ -0,0 +1,9 @@
<!-- wp:template-part {"slug":"header","theme":"emptytheme","tagName":"header"} /-->
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 we should not force a theme to specify the theme on each place the theme references a template part. The core should automatically assume that the template part being referenced is from that theme.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yeah, definitely. This seems like an unnecessary attribute in this case.

@@ -0,0 +1,5 @@
<!-- wp:template-part {"slug":"header","theme":"emptytheme","tagName":"header"} /-->
Copy link
Member

Choose a reason for hiding this comment

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

The template parts are not loading on the edit-site screen but it is probably a bug with FSE.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I think that's likely due to the Gutenberg change noted here. I loaded this up on a fresh site just now and it loads as expected.

@kjellr
Copy link
Collaborator Author

kjellr commented Nov 30, 2020

emptytheme/assets/block-template-parts is an empty file that I think was accidentally created and checked in?

Good catch! That's removed now.

@kjellr
Copy link
Collaborator Author

kjellr commented Dec 2, 2020

We just discussed this PR in the Block-based Themes chat this week, and decided that it makes sense to merge this PR in. It's been relatively solid the past couple weeks, and I think we hit all of the main discussion points in here. Plus, merging it will make @MaggieCabrera's theme generator easier for folks to use. 🙌

I'll go ahead and do that, and we can continue iterating in additional issues/PRs. Thanks everyone!

@kjellr kjellr merged commit 45025ba into master Dec 2, 2020
@kjellr kjellr deleted the add/empty-theme branch December 2, 2020 15:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
block-based theme A theme using HTML templates
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants