Try: Define the minimum boilerplate code for a block-based theme #81

kjellr · 2020-11-10T14:47:45Z

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.

blockbase/assets/alignments-editor.css

kjellr · 2020-11-10T14:49:19Z

blockbase/assets/alignments-front.css

@@ -0,0 +1,79 @@
+/*


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

kjellr · 2020-11-10T14:50:15Z

blockbase/experimental-theme.json

+ "units": [ "px", "em", "rem", "vh", "vw" ]
+ }
+ },
+ "custom": {


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

kjellr · 2020-11-10T14:53:37Z

blockbase/functions.php

+<?php
+
+if ( ! function_exists( 'blockbase_support' ) ) :
+ function blockbase_support() {


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' );

Is there an issue for this in Gutenberg?

I just opened WordPress/gutenberg#26901 to discuss.

kjellr · 2020-11-10T15:00:53Z

blockbase/functions.php

+/**
+ * Enqueue scripts and styles.
+ */
+function blockbase_scripts() {


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?

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

emptytheme/experimental-theme.json

emptytheme/functions.php

jorgefilipecosta · 2020-11-13T17:13:23Z

emptytheme/style.css

@@ -0,0 +1,15 @@
+/*
+Theme Name: Empty Theme


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.

I was thinking the same. That would be nice.

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.

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.

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 · 2020-11-16T13:37:32Z

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 · 2020-11-16T14:19:39Z

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.

emptytheme/assets/alignments-front.css

jorgefilipecosta

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

emptytheme/functions.php

kjellr · 2020-11-23T14:59:03Z

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.

primenest

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

kjellr · 2020-11-24T12:55:34Z

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 · 2020-11-24T13:03:35Z

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

kjellr · 2020-11-24T13:05:04Z

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.

jffng

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

jorgefilipecosta

LGTM 👍

jorgefilipecosta · 2020-11-26T18:43:49Z

emptytheme/block-templates/index.html

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


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.

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

jorgefilipecosta · 2020-11-26T18:44:49Z

emptytheme/block-templates/singular.html

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


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

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.

This reverts commit add855c.

Empty Theme: Script to generate a personalized starter theme

kjellr · 2020-11-30T15:35:03Z

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 · 2020-12-02T15:52:05Z

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 added 2 commits November 10, 2020 09:36

Add base files.

9d86ff1

Add editor alignments.

81d5dc5

kjellr added the block-based theme A theme using HTML templates label Nov 10, 2020

kjellr self-assigned this Nov 10, 2020

kjellr commented Nov 10, 2020

View reviewed changes

blockbase/assets/alignments-editor.css Outdated Show resolved Hide resolved

kjellr commented Nov 10, 2020

View reviewed changes

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 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

kjellr commented Nov 10, 2020

View reviewed changes

Remove editor alignments.

eafbc73

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

kjellr added 5 commits November 10, 2020 11:21

Update content width to match Gutenberg's default.

c2e5a49

Add additional (empty) json values as examples.

cb88cb0

Rename to emptytheme

ee0c577

Small consistency fix.

2c4e967

Get front-end stylesheets loading again.

4b830f6

jorgefilipecosta reviewed Nov 13, 2020

View reviewed changes

Remove a few experimental or unnecessary theme.json settings.

0a32985

Add support for featured images.

fae49ba

oandregal mentioned this pull request Nov 18, 2020

Consider allowing themes to enqueue stylesheets in theme.json WordPress/gutenberg#26902

Open

MaggieCabrera reviewed Nov 18, 2020

View reviewed changes

emptytheme/assets/alignments-front.css Outdated Show resolved Hide resolved

Fix variable name.

5a32027

jorgefilipecosta reviewed Nov 20, 2020

View reviewed changes

emptytheme/functions.php Outdated Show resolved Hide resolved

kjellr added 2 commits November 23, 2020 09:48

Move experimental link color opt-in to theme.json

c75159f

Add some base templates.

2c6d4e1

primenest reviewed Nov 24, 2020

View reviewed changes

MaggieCabrera added 3 commits November 25, 2020 18:53

initial script that creates the zip and changes style.css

6bcfc78

replace theme slug in functions.php

bcb6f1f

better treatment of space in the theme name

722af89

jffng reviewed Nov 25, 2020

View reviewed changes

MaggieCabrera added 3 commits November 26, 2020 11:35

copied files to a folder instead of creating a ZIP

3ca3b16

ask for further information from user

2644130

updated README with instructions

54d238b

jorgefilipecosta approved these changes Nov 26, 2020

View reviewed changes

renamed create_zip function

b742f92

MaggieCabrera mentioned this pull request Nov 27, 2020

Empty Theme: Script to generate a personalized starter theme #95

Merged

MaggieCabrera and others added 4 commits November 27, 2020 11:58

moved the old theme name to variable, missing replace

ce27254

removed heading rules in favor of having them in GB

add855c

Revert "removed heading rules in favor of having them in GB"

adf88f7

This reverts commit add855c.

Merge pull request #95 from WordPress/add/emptytheme-script

8b01603

Empty Theme: Script to generate a personalized starter theme

MaggieCabrera mentioned this pull request Nov 27, 2020

Adds in styling for post comments form WordPress/gutenberg#27009

Closed

Delete empty file.

929f249

Add theme to the main README

7d8f6b9

kjellr merged commit 45025ba into master Dec 2, 2020

kjellr deleted the add/empty-theme branch December 2, 2020 15:52

kjellr mentioned this pull request Dec 2, 2020

Add a readme for the emptytheme #106

Merged

oandregal mentioned this pull request Jan 13, 2021

Updates to experimental-theme.json WordPress/gutenberg#28163

Closed

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try: Define the minimum boilerplate code for a block-based theme #81

Try: Define the minimum boilerplate code for a block-based theme #81

kjellr commented Nov 10, 2020 •

edited

Loading

kjellr Nov 10, 2020 •

edited

Loading

kjellr Nov 10, 2020 •

edited

Loading

kjellr Nov 10, 2020

scruffian Nov 11, 2020

kjellr Nov 11, 2020

kjellr Nov 10, 2020

kjellr Nov 11, 2020

jorgefilipecosta Nov 13, 2020

scruffian Nov 13, 2020

pattonwebz Nov 13, 2020

aristath Nov 16, 2020

jorgefilipecosta Nov 20, 2020

MaggieCabrera commented Nov 16, 2020

kjellr commented Nov 16, 2020

jorgefilipecosta left a comment

kjellr commented Nov 23, 2020

primenest left a comment

kjellr commented Nov 24, 2020

mintplugins commented Nov 24, 2020

kjellr commented Nov 24, 2020

jffng left a comment

jorgefilipecosta left a comment

jorgefilipecosta Nov 26, 2020

kjellr Nov 30, 2020

jorgefilipecosta Nov 26, 2020

kjellr Nov 30, 2020

kjellr commented Nov 30, 2020

kjellr commented Dec 2, 2020

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

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

Try: Define the minimum boilerplate code for a block-based theme #81

Try: Define the minimum boilerplate code for a block-based theme #81

Conversation

kjellr commented Nov 10, 2020 • edited Loading

kjellr Nov 10, 2020 • edited Loading

Choose a reason for hiding this comment

kjellr Nov 10, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MaggieCabrera commented Nov 16, 2020

kjellr commented Nov 16, 2020

jorgefilipecosta left a comment

Choose a reason for hiding this comment

kjellr commented Nov 23, 2020

primenest left a comment

Choose a reason for hiding this comment

kjellr commented Nov 24, 2020

mintplugins commented Nov 24, 2020

kjellr commented Nov 24, 2020

jffng left a comment

Choose a reason for hiding this comment

jorgefilipecosta left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kjellr commented Nov 30, 2020

kjellr commented Dec 2, 2020

kjellr commented Nov 10, 2020 •

edited

Loading

kjellr Nov 10, 2020 •

edited

Loading

kjellr Nov 10, 2020 •

edited

Loading