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.

Sign up for GitHub

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
Merged

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

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
9d86ff1
Add base files.
kjellr Nov 10, 2020
81d5dc5
Add editor alignments.
kjellr Nov 10, 2020
eafbc73
Remove editor alignments.
kjellr Nov 10, 2020
c2e5a49
Update content width to match Gutenberg's default.
kjellr Nov 10, 2020
cb88cb0
Add additional (empty) json values as examples.
kjellr Nov 12, 2020
ee0c577
Rename to emptytheme
kjellr Nov 13, 2020
2c4e967
Small consistency fix.
kjellr Nov 13, 2020
4b830f6
Get front-end stylesheets loading again.
kjellr Nov 13, 2020
0a32985
Remove a few experimental or unnecessary theme.json settings.
kjellr Nov 13, 2020
fae49ba
Add support for featured images.
kjellr Nov 16, 2020
5a32027
Fix variable name.
kjellr Nov 18, 2020
c75159f
Move experimental link color opt-in to theme.json
kjellr Nov 23, 2020
2c6d4e1
Add some base templates.
kjellr Nov 23, 2020
6bcfc78
initial script that creates the zip and changes style.css
MaggieCabrera Nov 25, 2020
bcb6f1f
replace theme slug in functions.php
MaggieCabrera Nov 25, 2020
722af89
better treatment of space in the theme name
MaggieCabrera Nov 25, 2020
3ca3b16
copied files to a folder instead of creating a ZIP
MaggieCabrera Nov 26, 2020
2644130
ask for further information from user
MaggieCabrera Nov 26, 2020
54d238b
updated README with instructions
MaggieCabrera Nov 26, 2020
b742f92
renamed create_zip function
MaggieCabrera Nov 27, 2020
ce27254
moved the old theme name to variable, missing replace
MaggieCabrera Nov 27, 2020
add855c
removed heading rules in favor of having them in GB
MaggieCabrera Nov 27, 2020
adf88f7
Revert "removed heading rules in favor of having them in GB"
MaggieCabrera Nov 27, 2020
8b01603
Merge pull request #95 from WordPress/add/emptytheme-script
MaggieCabrera Nov 27, 2020
929f249
Delete empty file.
kjellr Nov 30, 2020
7d8f6b9
Add theme to the main README
kjellr Dec 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions emptytheme/assets/alignments-front.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/*
* Alignments, loaded in the front-end only.
*/

body {
margin: 0;
}

* {
box-sizing: border-box;
}

.wp-site-blocks,
.wp-block-template-part.alignfull {
padding: 0 var(--wp--custom--margin--horizontal);
}

.wp-site-blocks > *:not(.wp-block-post-content),
.wp-site-blocks .wp-block-post-content > * {
max-width: var(--wp--custom--width--default);
margin-left: auto;
margin-right: auto;
}

.wp-site-blocks .alignwide {
width: var(--wp--custom--width--wide);
max-width: 100%;
margin-left: auto;
margin-right: auto;
}

.wp-site-blocks .alignfull {
transform: translateX(calc(0px - var(--wp--custom--width-horizontal)));
width: calc(100% + (2 * var(--wp--custom--width-horizontal)));
max-width: calc(100% + (2 * var(--wp--custom--width-horizontal)));
kjellr marked this conversation as resolved.
Show resolved Hide resolved
margin-left: 0;
margin-right: 0;
box-sizing: content-box;
}

.wp-site-blocks .wp-block-template-part.alignfull {
width: 100%;
max-width: 100%;
}

.wp-site-blocks .wp-block-columns.alignfull {
width: 100%;
max-width: 100%;
}

.aligncenter {
text-align: center;
}

.wp-site-blocks .alignleft {
float: left;
margin-right: 2em;
max-width: 360px;
}

.wp-site-blocks .alignright {
float: right;
margin-left: 2em;
max-width: 360px;
}

@media screen and (min-width: 1290px) {

.wp-site-blocks,
.wp-block-template-part.alignfull {
padding: 0;
}

.wp-site-blocks .alignfull {
transform: translateX(0px);
width: 100% + var(--wp--custom--width-horizontal));
max-width: calc(100% + var(--wp--custom--width-horizontal));
}
}
Empty file added emptytheme/block-templates/index.html
View file
Open in desktop
Empty file.
37 changes: 37 additions & 0 deletions emptytheme/experimental-theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"global": {
"settings": {
"color": {
"gradients": [ ],
"palette": [ ]
},
"typography": {
"customFontSize": true,
kjellr marked this conversation as resolved.
Show resolved Hide resolved
"customLineHeight": true,
"fontFamilies": [ ],
"fontSizes": [ ],
"fontStyles": [ ],
kjellr marked this conversation as resolved.
Show resolved Hide resolved
"fontWeights": [ ],
"textDecorations": [ ],
"textTransforms": [ ],
"spacing": {
"customPadding": true,
"units": [ "px", "em", "rem", "vh", "vw" ]
kjellr marked this conversation as resolved.
Show resolved Hide resolved
}
},
"custom": {
"width": {
"default": "840px",
"wide": "1100px"
},
"margin": {
"horizontal": "14px"
}
}
},
"styles": {
"color": { },
"typography": { }
}
}
}
38 changes: 38 additions & 0 deletions emptytheme/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<?php

if ( ! function_exists( 'emptytheme_support' ) ) :
function emptytheme_support() {

// Alignwide and alignfull classes in the block editor
add_theme_support( 'align-wide' );

// Adding support for core block visual styles.
add_theme_support( 'wp-block-styles' );

// Adding support for responsive embedded content.
add_theme_support( 'responsive-embeds' );

// Add support for experimental link color control.
add_theme_support( 'experimental-link-color' );
kjellr marked this conversation as resolved.
Show resolved Hide resolved

// Add support for editor styles.
add_theme_support( 'editor-styles' );

// Enqueue editor styles.
add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'emptytheme_support' );
endif;

/**
* Enqueue scripts and styles.
*/
function emptytheme_scripts() {

// Enqueue theme stylesheet.
wp_enqueue_style( 'emptytheme-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );

// Enqueue alignments stylesheet.
wp_enqueue_style( 'emptytheme-alignments-style', get_template_directory_uri() . '/assets/alignments-front.css', array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'emptytheme_scripts' );
Empty file added emptytheme/index.php
View file
Open in desktop
Empty file.
15 changes: 15 additions & 0 deletions emptytheme/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

Theme URI: https://github.com/wordpress/theme-experiments/
Author: Kjell Reigstad
Description: The base for a block-based theme.
Requires at least: 5.3
Tested up to: 5.5
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: emptytheme

Empty Theme is distributed under the terms of the GNU GPL.
*/