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
Merged
Show file tree
Hide file tree
Changes from 2 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
15 changes: 15 additions & 0 deletions blockbase/assets/alignments-editor.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/*
kjellr marked this conversation as resolved.
Show resolved Hide resolved
* Alignments, loaded in the editor only.
*/

.wp-block {
max-width: var(--wp--custom--width--default);
}

.wp-block[data-align="wide"] {
max-width: var(--wp--custom--width--wide);
}

.wp-block[data-align="full"] {
max-width: none;
}
79 changes: 79 additions & 0 deletions blockbase/assets/alignments-front.css
Original file line number Diff line number Diff line change
@@ -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

* 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)));
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.
28 changes: 28 additions & 0 deletions blockbase/experimental-theme.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"global": {
"settings": {
"color": {
"gradients": [ ],
"palette": [ ]
},
"typography": {
"customFontSize": true,
"customLineHeight": true,
"fontSizes": [ ],
"spacing": {
"customPadding": true,
"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.

"width": {
"default": "580px",
"wide": "1100px"
},
"margin": {
"horizontal": "14px"
}
}
}
}
}
37 changes: 37 additions & 0 deletions blockbase/functions.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<?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.


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

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

// Enqueue editor styles.
add_editor_style( array(
'style.css',
'assets/alignments-editor.css'
) );
}
add_action( 'after_setup_theme', 'blockbase_support' );
endif;

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

wp_enqueue_style( 'blockbase-styles', get_stylesheet_uri() );
wp_enqueue_style( 'blockbase-block-styles', get_template_directory_uri() . '/assets/alignments-frontend.css' );
}
add_action( 'wp_enqueue_scripts', 'blockbase_scripts' );
Empty file added blockbase/index.php
Empty file.
15 changes: 15 additions & 0 deletions blockbase/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/*
Theme Name: Blockbase
Theme URI: https://github.com/kjellr/blockbase
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: blockbase

Blockbase is distributed under the terms of the GNU GPL.
*/