-
Notifications
You must be signed in to change notification settings - Fork 180
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
Changes from 13 commits
9d86ff1
81d5dc5
eafbc73
c2e5a49
cb88cb0
ee0c577
2c4e967
4b830f6
0a32985
fae49ba
5a32027
c75159f
2c6d4e1
6bcfc78
bcb6f1f
722af89
3ca3b16
2644130
54d238b
b742f92
ce27254
add855c
adf88f7
8b01603
929f249
7d8f6b9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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--margin--horizontal))); | ||
width: calc(100% + (2 * var(--wp--custom--margin--horizontal))); | ||
max-width: calc(100% + (2 * var(--wp--custom--margin--horizontal))); | ||
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--margin--horizontal)); | ||
max-width: calc(100% + var(--wp--custom--margin--horizontal)); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<!-- wp:site-title /--> | ||
|
||
<!-- wp:site-tagline /--> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<!-- wp:template-part {"slug":"header","theme":"emptytheme","tagName":"header"} /--> | ||
|
||
<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""}} --> | ||
<!-- wp:query-loop --> | ||
<!-- wp:post-title {"isLink":true} /--> | ||
|
||
<!-- wp:post-excerpt /--> | ||
<!-- /wp:query-loop --> | ||
<!-- /wp:query --> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<!-- wp:template-part {"slug":"header","theme":"emptytheme","tagName":"header"} /--> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. |
||
|
||
<!-- wp:post-title /--> | ||
|
||
<!-- wp:post-content /--> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
{ | ||
"global": { | ||
"settings": { | ||
"color": { | ||
"gradients": [ ], | ||
"link": true, | ||
"palette": [ ] | ||
}, | ||
"typography": { | ||
"customLineHeight": true, | ||
"fontFamilies": [ ], | ||
"fontSizes": [ ], | ||
"spacing": { | ||
"customPadding": true | ||
} | ||
}, | ||
"custom": { | ||
"width": { | ||
"default": "840px", | ||
"wide": "1100px" | ||
}, | ||
"margin": { | ||
"horizontal": "14px" | ||
} | ||
} | ||
}, | ||
"styles": { | ||
"color": { }, | ||
"typography": { } | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<?php | ||
|
||
if ( ! function_exists( 'emptytheme_support' ) ) : | ||
function emptytheme_support() { | ||
|
||
// Adding support for featured images. | ||
add_theme_support( 'post-thumbnails' ); | ||
|
||
// Adding support for 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 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' ); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
/* | ||
Theme Name: Empty Theme | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was thinking the same. That would be nice. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. | ||
*/ |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.