wordpress/theme-experiments

Experimenting with themes made out of blocks.

WordPress Theme Experiments

⚠️ These themes are not intended for use on a production site.

About

This repository is dedicated to exploring how WordPress themes can best leverage Gutenberg blocks. Each sub-directory contains a WordPress theme that explores some aspect of creating themes using blocks or block templates.

What's Here

Theme	Updated For
Ambitious	Gutenberg 7.6
Empty Theme	Gutenberg 12.0, WordPress 5.9.0
Gutenberg Starter Theme Blocks	Gutenberg 8.6
Photo Blocks	Gutenberg 9.5
Twenty Nineteen Blocks	Gutenberg 8.6
Twenty Twenty Blocks	Gutenberg 8.6
TT1 Blocks	The version of the theme in this repository may rely on Gutenberg features that have not yet made it into an official release
Armando	Gutenberg 10.6

require-gutenberg is a utility for themes to check whether the Gutenberg plugin is installed.

Submitting an experiment

We encourage you to submit your experiment to be included! To get started, check out the contributor's guide.

Instructions

Most of the themes here rely on experimental Gutenberg functionality that must be turned on manually. We recommend testing with WordPress 5.3 or higher, PHP 7.3 or higher, and the latest version of the Gutenberg plugin. Here are general instructions for getting started:

1. Clone this repository or upload a zip of the theme into your site’s themes directory.
2. Install the Gutenberg plugin.
3. Enable the "Full Site Editing" experiment in the Gutenberg > Experiments panel.
4. Activate the new theme from within Appearance > Themes.

If the theme includes starter content, you'll want to install on a fresh site, and visit the Customizer after installation. Pressing the "Publish" in there should auto-populate the starter content.

Tip: WordPress will search for themes inside of subdirectories. If you'd like to test many of the themes experiments, you should be able to clone this entire repository into the /wp-content/themes/ folder of your test site.

Resources and Background

Here are some resources that may be useful context for learning more about block-based themes:

• Block-based Theme Documentation
• theme.json Documentation
• Create a block theme (tutorial)
• Full site editing development in the Gutenberg repo
• Global styles development in the Gutenberg repo

Generating your own starter theme

We have included a script so you can generate a theme based on a starter boilerplate with the minimum necessary to build your own block theme. You will need to have php installed to run it using:

php new-empty-theme.php

Questions or Improvements?

If you'd like to propose improvements to this repository, feel free to open an issue or PR.

theme-experiments's Issues

[twentytwenty blocks] Alignment Issues

Description
There are alignment issues in both the front-end and editor, with blocks that support wide and full width. To recreate these issues:

• Activate Gutenberg 7.8.1
• Activate the TwentyTwenty Blocks theme
• Add any full or wide-width block to the page

--
In the editor:

--
Front-end full-width image block: The image does not take up the full width.

--
Front-end wide-width image block: The image overflows to the right.

[Gutenberg Starter Theme Blocks] Missing and wrong commas in blocks.css

Missing comma:

https://github.com/WordPress/theme-experiments/blob/master/gutenberg-starter-theme-blocks/css/blocks.css#L42

https://github.com/WordPress/theme-experiments/blob/master/gutenberg-starter-theme-blocks/css/blocks.css#L232

Wrong comma:

https://github.com/WordPress/theme-experiments/blob/master/gutenberg-starter-theme-blocks/css/blocks.css#L206

Don't need px unit:

https://github.com/WordPress/theme-experiments/blob/master/gutenberg-starter-theme-blocks/css/blocks.css#L59

Adding data-attributes to templates

Hey,

Is it possible to add data-attributes to the .html templates?

I am imagining something like that:

<!-- wp:group {"align":"full","className":"site-content testest", "attributes":"[data-type="header"]"} -->
<div class="wp-block-group alignfull site-content testest" data-type="header"><div class="wp-block-group__inner-container"><!-- wp:post-title /--><!-- wp:post-content /--></div></div>
<!-- /wp:group -->

I know blocks are dependant on those attributes to function correctly so naturally this code results in an error, but I am still wondering if that is a possibility.

Thanks!
Dennis

Twenty Twenty-One Blocks: Migrate Preformatted Block styles

Migrate styles to theme.json settings for preformatted block whenever possible.

Broken out of #82

Twenty Twenty-One Blocks: Body line height is not correct.

The Global lineHeight rule defined in experimental-theme.json isn't actually working yet:

theme-experiments/twentytwentyone-blocks/experimental-theme.json

Line 127 in 442adbf

"lineHeight": "var(--wp--custom--line-height--body)"

lineHeight works fine when it's applied to specific blocks, but the global value doesn't seem to be picked up. 🤔

@jorgefilipecosta or @nosolosw, do you know if this is a Gutenberg bug, or is it theme-related? We can specify the line height for the paragraph block (and other text blocks) if we need to, but it's much easier to set this at the global level first.

Migrate CSS for the Tag Cloud block

The code is:

.wp-block-tag-cloud {

	&.aligncenter {
		text-align: center;
	}
}

.wp-block-tag-cloud {

	&.alignfull {
		padding-left: var(--global--spacing-unit);
		padding-right: var(--global--spacing-unit);
	}
}

I think all this CSS can live in Gutenberg: WordPress/gutenberg#27342

Twenty twenty-One Blocks: Add footer content

Add contact information and social links to the footer according to the design:

https://www.figma.com/file/OEtsCj8oD8JPVx4OvsS0U2/Twenty-Twenty-One?node-id=269%3A55

Move post/page title to top bar.

Is your feature request related to a problem? Please describe.
In Full Site Editing there are explorations going on in relation to moving the post/page title to the top bar mid area.

It would be nice to get the post/page title to the top bar. Have the new Post/Page Title block in place. Making it possible to add a Cover Block and the Post/Page title block into it.

As the user would then finally be able to not have the page title in the content but can add it back if they choose to.

There are a few different FSE issues in relation to the above.

Move post/page title to the top bar.

Is your feature request related to a problem? Please describe.
In Full Site Editing there are explorations going on in relation to moving the post/page title to the top bar mid area.

It would be nice to get the post/page title to the top bar. Have the new Post/Page Title block in place. Making it possible to add a Cover Block and the Post/Page title block into it.

As the user would then finally be able to not have the page title in the content but can add it back if they choose to.

There are a few different FSE issues in relation to the above.

Twenty Twenty-One Blocks: Add a 404 page

Add a 404 page to the theme.

Design:
https://www.figma.com/file/OEtsCj8oD8JPVx4OvsS0U2/Twenty-Twenty-One?node-id=924%3A870

Video Block: Migrate over default block styles as theme.json settings

These are the video block styles:

.wp-block-video {

	figcaption {
		color: var(--global--color-primary);
		font-size: var(--global--font-size-xs);
		margin-top: calc(0.5 * var(--global--spacing-unit));
		margin-bottom: var(--global--spacing-unit);
		text-align: center;
	}
}

I don't think we need to migrate these styles as Gutenberg already has them.

* > figure > video {
	max-width: unset;
	width: 100%;
	vertical-align: middle;
}

The bottom styles are being migrated to Gutenberg: WordPress/gutenberg#27328

Broken out of #82

TT1 Blocks: Quote Block: Migrate CSS to theme.json

The code is here.

From #82

TT1 Blocks: Group Block: Migrate CSS to theme.json

The code is here.

From #82

TwentyTwenty-block: Parse Error

Parse error: syntax error, unexpected ')' in /.../wp-content/themes/twentytwenty-blocks/functions.php on line 219

I uploaded the zipped directory to a clean WordPress install with Gutenberg 7.3 also tried it with Gutenberg 7.2, same error message on activation.

PHP version is 7.2.9
Webserver: nginex
WP 5.3.2

TT1 Blocks: Gallery Block: Migrate CSS to theme.json

The code is here.

From #82

Twenty Twenty-One: Migrate over missing block styles CSS

A few of the Block Style CSS rules from Twenty Twenty-One still need to be migrated over to Twenty Twenty-One. Until then, these will appear improperly styled:

• Latest Posts: Dividers
• Latest Posts: Borders
• Editor styles for Social Links: Dark gray color

Migrate styles from List Block

From #82

The rules are:
styles.scss:

ul,
ol {
	font-family: var(--list--font-family);
	margin: 0;
	padding-left: calc(2 * var(--global--spacing-horizontal));

	// Utility classes
	&.aligncenter {
		list-style-position: inside;
		padding: 0;
	}

	&.alignright {
		list-style-position: inside;
		text-align: right;
		padding: 0;
	}
}

ul {
	list-style-type: disc;
}

ol {
	list-style-type: decimal;
}

dt {
	font-family: var(--definition-term--font-family);
	font-weight: bold;
}

dd {
	margin: 0;
	padding-left: calc(2 * var(--global--spacing-horizontal));
}

editor.scss:

ul,
ol {
	font-family: var(--list--font-family);
	margin: var(--global--spacing-vertical) 0;
	padding-left: calc(2 * var(--global--spacing-horizontal));

	// Utility classes
	&.aligncenter {
		list-style-position: inside;
		padding: 0;
		text-align: center;
	}

	&.alignright {
		list-style-position: inside;
		padding: 0;
		text-align: right;
	}
}

li {

	> ul,
	> ol {
		margin: 0;
	}
}

dt {
	font-family: var(--definition-term--font-family);
	font-weight: bold;
}

I have opened a couple of Gutenberg PRs for this:
WordPress/gutenberg#27511
WordPress/gutenberg#27510

Twenty Twenty One Blocks: Update alignment rules

The alignment rules are outdated and they need to reflect the latest version of the code on Twenty Twenty One.

TT1 Blocks:

theme-experiments/twentytwentyone-blocks/style.css

Line 88 in d59fac6

max-width: 360px;

TT1:

https://github.com/WordPress/twentytwentyone/blob/ba9f20cad89163761185c0467b346ba42541ae22/assets/sass/05-blocks/utilities/_style.scss#L25

TT1 Blocks: HTML Block: Migrate CSS to theme.json

The code is here.

From #82

Twenty Twenty-One Blocks: Migrate Paragraph Block styles

Check that the styles for the paragraph block mirror the ones in TT1. Define as much as possible of the styles within theme.json

Part of #82

Twenty Twenty-One blocks: Migrate styles for Media & text

From: #82

For this block, the block style with the border is already migrated.

Twenty Twenty-One also has additional inner padding compared to the style in the editor.

The original editor style only has horizontal padding:
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/media-text/style.scss#L50

.wp-block-media-text .wp-block-media-text__content {
	direction: ltr;
	/*!rtl:begin:ignore*/
	grid-column: 2;
	grid-row: 1;
	/*!rtl:end:ignore*/
	padding: 0 8% 0 8%;
	word-break: break-word;
}

This means that with the option to adjust the position of the text, the text content may touch the upper and lower edges of the block.

This should be adjusted in Gutenberg. But should we add the experimental spacing / padding settings to the text part of the block only, or adjust the vertical padding in the block CSS?

We should also research if the 8% value is consistent with the spacing for other blocks or if it needs to be updated.

How to use: template_include

The function: gutenberg_render_block_core_template_part

Has the line:

$template_part_file_path =
get_stylesheet_directory() . '/block-template-parts/' . $attributes['slug'] .'.html';

How do I get a CPT to use its own block-template-parts? Is this the correct place to ask this?

Verse Block: Migrate styles to theme.json

The editor styles are:

pre.wp-block-verse {
	padding: 0;
	color: currentColor;
}

The frontend styles are:

.wp-block-verse {
	font-family: var(--entry-content--font-family);
}

The font family will be handled by this PR: WordPress/gutenberg#27332
The padding is being set by the block. I think we should move this to Global Styles, but its tricky because we need to set a default. I added this PR to track it: WordPress/gutenberg#27338
The color seems unnecessary

Add theme generator

Similar to the theme generator as seen on https://underscores.me/, it would be helpful to have a block-based theme generator in place, to help new contributors creating block-based themes.

TT1 Blocks: RSS Block: Migrate CSS to theme.json

The code is:

.wp-block-rss {
	padding-left: 0;

	> li {
		list-style: none;
	}

	// Vertical margins logic
	&:not(.is-grid) > li {
		margin-top: calc(1.666 * var(--global--spacing-vertical));
		margin-bottom: calc(1.666 * var(--global--spacing-vertical));

		&:first-child {
			margin-top: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	&.is-grid {

		> li {
			margin-bottom: var(--global--spacing-vertical);

			&:last-child {
				margin-bottom: 0;
			}
		}

		// Remove bottom margins in grid columns
		&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1),
		&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li,
		&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1),
		&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li,
		&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1),
		&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li,
		&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1),
		&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li,
		&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1),
		&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li {
			margin-bottom: 0;
		}
	}

	> li > * {
		margin-top: calc(0.333 * var(--global--spacing-vertical));
		margin-bottom: calc(0.333 * var(--global--spacing-vertical));

		&:first-child {
			margin-top: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	// Post title
	.wp-block-rss__item-title > a {
		display: inline-block;
		font-family: var(--latest-posts--title-font-family);
		font-size: var(--latest-posts--title-font-size);
		font-weight: var(--heading--font-weight);
		line-height: var(--global--line-height-heading);
		margin-bottom: calc(0.333 * var(--global--spacing-vertical));
	}

	// Post author
	.wp-block-rss__item-author {
		color: var(--global--color-primary);
		font-size: var(--global--font-size-md);
		line-height: var(--global--line-height-body);
	}

	// Post date
	.wp-block-rss__item-publish-date {
		color: var(--global--color-primary);
		font-size: var(--global--font-size-xs);
		line-height: var(--global--line-height-body);

		[class*="inner-container"] &,
		.has-background & {
			color: currentColor;
		}
	}

	// Post content
	.wp-block-rss__item-excerpt,
	.wp-block-rss__item-full-content {
		font-family: var(--latest-posts--description-font-family);
		font-size: var(--latest-posts--description-font-size);
		line-height: var(--global--line-height-body);
		margin-top: calc(0.666 * var(--global--spacing-vertical));
	}

	// Utility classes
	&.alignfull {
		padding-left: var(--global--spacing-unit);
		padding-right: var(--global--spacing-unit);

		.entry-content [class*="inner-container"] &,
		.entry-content .has-background & {
			padding-left: 0;
			padding-right: 0;
		}
	}
}

From #82

TT1 Blocks: Search Block: Migrate CSS to theme.json

The code is here.

From #82

Link for gutenberg-starter-theme-blocks seems to have errors in local environment

I had my test environment in http://localhost/wcms_project/wordpress/ as home page.
when I click on the home button, it went to http://localhost and not http://localhost/wcms_project/wordpress/.

Twenty Twenty-One Blocks: Create a better fallback page for when FSE is not enabled.

Currently, the index.php fallback page only says // Nothing to see here.

This can be improved by adding some additional information to logged in users about why this page is showing.

I do not know what the long term plan is for this page, but it is also possible to display a standard front page with content to logged out visitors instead of a broken, white page.

Consider denoting or removing themes in this repo that have not been updated recently.

👋 As Full-Site Editing has moved forward, some of the themes in this repo no longer work nicely. This can be confusing for folks to visit this repository — it's unclear which themes are up to date and which aren't.

I suggest we either:

1. Test & remove themes that don't work as of Gutenberg 9.2.
2. Update the main Readme to list each theme available in this repo, and the latest version it's been verified to work against.

Any thoughts on those options?

TT1 Blocks: Latest Comments Block: Migrate CSS to theme.json

The code is here.

From #82

An example of the state of the comments block can be found here: https://2021blocks.wordpress.net/comment-block/

The latest-comments block will need to support configurable padding. This Gutenberg issue has been opened to track that.

TT1 Blocks: Navigation Block: Migrate CSS to theme.json

The code is here.

From #82

TT1 Blocks: Migrate CSS for code block

Broken out of #82

The code is:

.wp-block-code {
	border-color: var(--global--color-border);
	border-radius: 0;
	border-style: solid;
	border-width: 0.1rem;
	padding: var(--global--spacing-unit);

	code {
		font-size: var(--global--font-size-xs);
		white-space: pre;
		overflow-x: auto;
		display: block;
	}
}

• The border settings will need to be added to Global Styles.
• IMO the white space and overflow settings can be removed to just use the ones that the block has
• display block should probably be added to the block too
• a padding control should also be added to the block

Twenty Twenty-One Blocks: Migrate Image Block styles

Check that the styles for the image block mirror the ones in TT1. Define as much as possible of the styles within theme.json

Part of #82

TT1 Blocks: Spacer Block: Migrate CSS to theme.json

The code is here.

From #82

Twenty Twenty One Blocks: Migrate Social icons styles

Part of #82

TT1:

TT1 Blocks:

TT1 Blocks: Latest Posts Block: Migrate CSS to theme.json

The code is here.

From #82

TT1 Blocks: Columns Block: Migrate CSS to theme.json

The code is here.

From #82

Twenty Twenty-One Blocks: Migrate Heading styles

Check that the styles for the paragraph block mirror the ones in TT1. Define as much as possible of the styles within theme.json

Move this to theme.json

Part of #82

TT1 Blocks: Audio block: migrate default styles to GB

The styles for the audio block come from this issue: WordPress/twentytwentyone#207

I believe this should be solved directly on GB for all themes to benefit from it.

Broken out of #82

Remove images loaded from outside the current site

I am not sure it's a good idea to be directly loading images from a non-local place, like (github or amazons3). Eventually, there will have to be a solution for loading background image files from the current WP's domain, instead of from "the cloud".

For example:
https://github.com/WordPress/theme-experiments/blob/master/parisienne/block-template-parts/contact.html#L4

That will need to be adjusted (at some point) to pull from the local domain, though I am not sure how that should be best accomplished. I think this is an important piece to solve if static HTML files are to be the solution for full-site-editing.

Twenty Twenty-One Blocks: Migrate over default block styles as theme.json settings.

Many (most) blocks in Twenty Twenty-One have custom styles applied. We should work towards making the block-based version mimic those styles.

It's ok to migrate over a little CSS for transitions and other extraneous CSS, but basic styles like font specifications should be defined as theme.json settings whenever possible.

This is the full list of blocks that have stylesheets in Twenty Twenty-One. They'll need to be individually audited to see which how much can be migrated over today. Some may already be complete (headings and separator styles for example), so we can check those off after we double check.

• audio - #101
• button - #114
• code - #94
• columns - #115
• cover - #116
• file - #117
• gallery - #118
• group- #119
• heading - #97
• html - #121
• image - #92
• latest-comments - #122
• latest-posts - #123
• list - #111
• media-text - #112
• navigation - #124
• paragraph - #91
• preformatted - #96
• pullquote - #126
• quote - #127
• rss - #128
• search - #129
• separator
• social-icons - #108
• spacer - #130
• table - #131
• tag-clould - #102
• utilities - #132
• verse - #100
• video - #99

For styles which should be possible via Gutenberg's design tools (e.g. color, spacing, etc), please open an issue in the Gutenberg repo.

These Gutenberg issues need to be solved before we can achieve this:

• WordPress/gutenberg#21540
• WordPress/gutenberg#25791
• WordPress/gutenberg#27116
• WordPress/gutenberg#27269
• WordPress/gutenberg#27315
• WordPress/gutenberg#27154
• WordPress/gutenberg#22641
• WordPress/gutenberg#27335 (closed)
• WordPress/gutenberg#27796
• WordPress/gutenberg#27342 (merged)
• WordPress/gutenberg#26633
• WordPress/gutenberg#27107
• WordPress/gutenberg#27075
• WordPress/gutenberg#27480
• WordPress/gutenberg#27315
• WordPress/gutenberg#27510
• WordPress/gutenberg#27511
• WordPress/gutenberg#27582
• WordPress/gutenberg#27615
• WordPress/gutenberg#27760
• WordPress/gutenberg#27767
• WordPress/gutenberg#27766
• WordPress/gutenberg#27803

TT1 Blocks: File Block: Migrate CSS to theme.json

The code is here.

From #82

TT1 Blocks: Cover Block: Migrate CSS to theme.json

The code is here.

From #82

TT1 Blocks: Pullquote Block: Migrate CSS to theme.json

The code is here.

From #82

TT1 Blocks: Button Block: Migrate CSS to theme.json

The code is here.

From #82

Add a theme with a magazine-style layout

It would be useful to see a block theme that implements a magazine style layout.

Some examples:

• https://bbc.com
• https://verywellhealth.com
• http://www.librarystack.org/

TT1 Blocks: Paragraph Block: Migrate CSS to theme.json

The code is here.

From #82

Twenty Twenty-One Blocks: Post/Page Titles need styles

Screenshot:

Current:

Original Theme:

Migrate Spacer Block code

From #82

The CSS is

.wp-block-spacer {
	display: block;
	// Remove vertical margins
	margin-bottom: 0 !important;
	margin-top: 0 !important;

	@include media(mobile-only) {

		&[style] {
			height: var(--global--spacing-unit) !important;
		}
	}
}

Consider adding a BlockBook for the themes in this repository

See https://riad.blog/2020/07/22/introducing-blockbook-for-wordpress/