The is the beginning of my WP block theme from scratch explorations. This page will be edited to be a more complete tutorial, but for now it is serving more as a quick-form note.
Information here is gathered from various places, and I will add references as I go, but I have to start with Full Site Editing and the Frost Theme as the primary places of learning. More information will be added as I flesh out these posts
File Structure
In the local WordPress install (I recommend using Local by Flywheel), within the wp-content/themes folder, add a folder for the new theme and create the following structure of empty files. I will be calling my theme Builder:
builder
parts
footer.html
header.html
templates
404.html
index.html
page.html
single.html
functions.php
style.css
theme.json
Update the style.css
Add the following to the styles.css. This is required information for the theme. More information can be found on the WordPress site.
/*
Theme Name: Builder
Theme URI:
Author:
Author URI:
Description:
Tags:
Requires at least: 6.0
Tested up to: 6.0
Requires PHP: 5.6
Version: 0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: builder
*/
/* Optional, uses CSS grid to place body elements */
.wp-site-blocks {
display: grid;
height: 100vh;
grid-template-rows: auto 1fr auto;
font-family: sans-serif;
}Update the footer.html
Here, I am only using the built in WordPress site-wide search
<!-- wp:group {"align":"full", "layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search"} /-->
</div>
<!-- /wp:group -->Update the header.html
<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull">
<!-- wp:group {"align":"full","layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide">
<div>
<!-- wp:site-title /-->
<!-- wp:site-tagline /-->
</div>
<!-- wp:navigation {"isResponsive":true,"style":{"spacing":{"blockGap":"20px"}}} -->
<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->404.html
<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
<!-- wp:group {"tagName":"main","className":"site-content"} -->
<main class="wp-block-group site-content">
<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<h1>404: Nothing found</h1>
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->index.html
<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
<!-- wp:group {"tagName":"main","className":"site-content"} -->
<main class="wp-block-group site-content">
<!-- wp:query-title {"type":"archive","level":2,"fontSize":"large"} /-->
<!-- wp:term-description /-->
<!-- wp:spacer {"height":"20px"} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:query {"query":{"perPage":5,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-query alignwide">
<!-- wp:post-template -->
<!-- wp:post-title {"fontSize":"large","isLink":true} /-->
<!-- wp:post-featured-image {"isLink":true} /-->
<!-- wp:group {"layout":{"type":"flex","allowOrientation":false}} -->
<div class="wp-block-group">
<!-- wp:post-author {"showAvatar":false} /-->
<!-- wp:post-date /-->
<!-- wp:post-terms {"term":"category"} /-->
</div>
<!-- /wp:group -->
<!-- wp:post-excerpt {"moreText":"Read more","showMoreOnNewLine":false} /-->
<!-- /wp:post-template -->
<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous {"label":"Previous"} /-->
<!-- wp:query-pagination-next {"label":"Next"} /-->
<!-- /wp:query-pagination -->
</div><!-- /wp:query -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->page.html
<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
<!-- wp:group {"tagName":"main","className":"site-content"} -->
<main class="wp-block-group site-content">
<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:post-title {"level":1} /-->
</div>
<!-- /wp:group -->
<!-- wp:post-content {"layout":{"inherit":true}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->single.html
<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
<!-- wp:group {"tagName":"main","className":"site-content"} -->
<main class="wp-block-group site-content">
<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:post-title {"level":1} /-->
</div>
<!-- /wp:group -->
<!-- wp:post-content {"layout":{"inherit":true}} /-->
<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"className":"post-meta","layout":{"type":"flex"},"fontSize":"small"} -->
<div class="wp-block-group post-meta has-small-font-size">
<!-- wp:post-date /-->
<!-- wp:paragraph -->
<p aria-hidden="true">•</p>
<!-- /wp:paragraph -->
<!-- wp:post-author {"showAvatar":false} /-->
<!-- wp:paragraph -->
<p aria-hidden="true">•</p>
<!-- /wp:paragraph -->
<!-- wp:post-terms {"term":"category"} /-->
<!-- wp:post-terms {"term":"post_tag"} /-->
</div>
<!-- /wp:group -->
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:comments-query-loop -->
<div class="wp-block-comments-query-loop">
<!-- wp:comments-title {"style":{"spacing":{"margin":{"bottom":"30px"}}}} /-->
<!-- wp:comment-template -->
<!-- wp:columns {"style":{"spacing":{"blockGap":"10px","margin":{"bottom":"30px"}}}} -->
<div class="wp-block-columns" style="margin-bottom:30px">
<!-- wp:column {"width":"48px"} -->
<div class="wp-block-column" style="flex-basis:48px">
<!-- wp:avatar {"size":48,"style":{"border":{"radius":"24px"}}} /-->
</div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-column">
<!-- wp:comment-author-name /-->
<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"10px"}},"layout":{"type":"flex"}} -->
<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
<!-- wp:comment-date /-->
<!-- wp:comment-edit-link /-->
</div>
<!-- /wp:group -->
<!-- wp:comment-content /-->
<!-- wp:comment-reply-link /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- /wp:comment-template -->
<!-- wp:comments-pagination -->
<!-- wp:comments-pagination-previous /-->
<!-- wp:comments-pagination-numbers /-->
<!-- wp:comments-pagination-next /-->
<!-- /wp:comments-pagination -->
<!-- wp:post-comments-form /-->
</div>
<!-- /wp:comments-query-loop -->
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->functions.php
<?php
/**
* Functions and definitions
*
* @link https://developer.wordpress.org/themes/basics/theme-functions/
*
* @package builder
* @since 0.1
*/
/**
* Enqueue the style.css file.
*
* @since 0.1
*/
function builder_styles() {
wp_enqueue_style(
'builder-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'builder_styles' );
if ( !function_exists( 'builder_setup' ) ) {
function builder_setup() {
// Add support for Block Styles.
add_theme_support( 'wp-block-styles' );
// Remove core block patterns.
remove_theme_support( 'core-block-patterns' );
}
}
add_action( 'after_setup_theme', 'builder_setup' );theme.json
{
"version": 2,
"settings": {
"layout": {
"contentSize": "740px",
"wideSize": "1200px"
}
}
}
Current state
This is where we currently are, nothing really interesting, but a solid start.
