carolinan / fullsiteediting

Learn about full site editing & block-based themes

This repository contains the course material for the course on

https://fullsiteediting.com/courses/full-site-editing-for-theme-developers/

At this time, it does not include the full transcripts, but they are available on the website.

Who is this course for?

This course is an overview created for theme authors who want to learn about full site editing. -And If you have already been creating advanced custom blocks for a while and you are working on enterprise level WordPress projects; brilliant, I probably don’t have much to new teach you here =D.

Please pick and choose from the lessons or articles that interests you.

Are there any prerequisites?

To make the most out of this course, you need to have basic knowledge of theme development. You need to know about basic WordPress functions, PHP, HTML and CSS. If you find that the course is too fast or too slow -let me know. It would only help me improve the course)

License

All code examples are dual licensed as MIT & GPL v2 or later. For themes, see the license file in the specific theme.

fullsiteediting's Issues

Missing current year in output

fullsiteediting/Starter themes/advanced-61/patterns/footer-links.php

Line 18 in a73b0a7

<?php esc_html_e( 'Copyright', 'full-site-editing' ) . ' ' . date_i18n( _x( 'Y', 'copyright date format', 'full-site-editing' ) ); ?></p>

in the line above is mistake. The only word 'Copyright' will be shown but not current year. I think should be like:
<?php echo esc_html__( 'Copyright', 'full-site-editing' ) . ' ' . esc_html( date_i18n( _x( 'Y', 'copyright date format', 'full-site-editing' ) ) ); ?></p>

Custom CSS should be on a single line

"Site-wide custom CSS" on https://fullsiteediting.com/lessons/how-to-use-custom-css-in-theme-json/

Visual Studio Code indicates error in the JSON if have line breaks in the CSS.
"Unexpected end of string"

Have to join all the CSS into a single line, from "css:" to the closing double quote.
All JSON strings have to be on a single line (or "JSON requires all line breaks to be escaped as \n.")

I suggest mentioning that "single line" in the documentation.

Related issue to add to documentation: escaping double quotes in your CSS
background: "red"
change to
background: \"red\"

Update WooCommerce CSS

Update the WooCommerce CSS in the advanced starter theme version.

Question: Theme patterns with custom PHP functions & WP-CLI

Hey @carolinan I have a question and I can't figure out if this is a bug in core, or in WP-CLI, or both or neither...

My team and I have been building a FSE theme and we've been reading and referring to your fullsiteediting.com website (and the related examples here in GitHub) and we've stumbled into an issue I can recreate with at least one of your starter themes:

1. Using the advanced-60 theme
2. Install and activate it
3. From the terminal, executed wp core is-installed

Resulting error:

PHP Fatal error:  Uncaught Error: Call to undefined function full_site_editing_privacy() in /XXX/wp-content/themes/advanced-60/patterns/footer-links.php:19
Stack trace:
#0 /XXX/wp-includes/block-patterns.php(322): include()
#1 /XXX/wp-includes/class-wp-hook.php(307): _register_theme_block_patterns()
#2 /XXX/wp-includes/class-wp-hook.php(331): WP_Hook->apply_filters()
#3 /XXX/wp-includes/plugin.php(476): WP_Hook->do_action()
#4 /XXX/wp-settings.php(598): do_action()
#5 phar:///usr/local/bin/wp/vendor/wp-cli/wp-cli/php/WP_CLI/Runner.php(1317): require('...')
#6 phar:///usr/local/bin/wp/vendor/wp-cli/wp-cli/php/WP_CLI/Runner.php(1235): WP_CLI\Runner->load_wordpress()
#7 phar:///usr/local/bin/wp/vendor/wp-cli/wp-cli/php/WP_CLI/Bootstrap/LaunchRunner.php(28): WP_CLI\Runner->start()
#8 phar:///usr/local/bin/wp/vendor/wp-cli/wp-cli/php/bootstrap.php(78): WP_CLI\Bootstrap\LaunchRunner->process()
#9 phar:///usr/local/bin/wp/vendor/wp-cli/wp-cli/php/wp-cli.php(27): WP_CLI\bootstrap()
#10 phar:///usr/local/bin/wp/php/boot-phar.php(11): include('...')
#11 /usr/local/bin/wp(4): include('...')
#12 {main}
  thrown in /XXX/wp-content/themes/advanced-60/patterns/footer-links.php on line 19

I've first been trying to review pattern-related code and guides and I don't see anything that explicitly prohibits or says theme devs should not be using custom PHP functions in the pattern . It seems like the whole point of the pattern being in PHP is to allow using custom functions.

It seems WP Core functions are allowed.

I think it comes down to, really, that the theme isn't "loaded" for some of these wp-cli commands but the pattern is still evaluated due to core bootstrapping? I'm not sure... I figured I'd ask you what you thought about this first because you seem to be know all things FSE pretty well.

Thanks!

Remove index.php from FSE themes

https://make.wordpress.org/core/2022/05/03/wordpress-6-0-field-guide/

This change removes the requirement for block themes to have an unused index.php template just for activation, as they use a templates/index.html file instead. (#54272)

Wrong code for disabling gradients in single block

On https://fullsiteediting.com/lessons/theme-json-color-options/,

The code of how to disable gradients in a single block is incorrect.

Starter themes: Add % to the spacing units in theme.json.

starter themes: fix duotone and gradients

• The description of the gradients uses color names, that are not correct if new colors are generated.
• Duotones that is described to use primary does not use the correct hex code.

Site Logo: specify image, and Images in navigation block

About https://fullsiteediting.com/blocks/site-logo/

The image shown on /blocks/site-logo/ doesn't show the block settings (no block is selected).

There is no documentation on specifying the image for the logo.
I did find that clicking the "no image" icon in the hover-menu for the block, lets me select an image from Media Library. Not as intuitive as if the setting were in the Block Settings panel.

I couldn't find how to make the Site Logo appear next to Navigation, other than making columns, so I tried adding the Site Logo as a Navigation entry. That works.

About the Navigation Block:
There are no settings for image size of an image included in the Navigation Block menu item. Should be set at the Navigation Block (not each menu item as is currently the way).
When adding an image, the image is placed at the insertion point, so very easy to make the image appear in the middle of the menu text. Hard to see where the insertion point is; so have to press "home" before adding an image.
Images in the menu need to be vertical aligned middle.

Site Logo in a Navigation Block: the logo size is portrait, the navigation icons I'm using are square; the logo needs to have its own size setting in the navigation block

Here's the CSS I used

.wp-block-navigation-item img {
    width: 38px;
    vertical-align: middle;
}
img.custom-logo, .wp-block-navigation-item img.custom-logo {
    width: 100px;
}
.wp-block-navigation ul, .wp-block-navigation ul li {
    row-gap: 5px;
}

group block error on site editor and post editor

• Fresh WordPress install on Flywheel Local with default options jan 1, 2021
• Followed your course instructions as per https://fullsiteediting.com/lessons/preparations-quick-start-guide/
• Chose armando theme (code copied from this repo jan 1, 2021)
• Full functionality with armando and other themes from https://github.com/WordPress/theme-experiments
• When I edit site or edit post (with armando theme activated), everything works as expected. Except if I want to place a group block. Then I get the message (in both edit site and edit post contexts):

  This block has encountered an error and cannot be previewed.

• Code exposed by switching to code editor (in edit post context):

  <!-- wp:group -->
  <div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>
  <!-- /wp:group -->

This error does not occur if I select another block based theme from the official repo cited above.

I'm really excited by your site, https://fullsiteediting.com/, and enjoy getting up to speed with your developer course. Thank you!!

Google fonts don't appear in the font family selector

I followed your instructions to build a simple FSE block theme. Everything works great except my added Google fonts don't appear in the font family selector. The only font families that show up are Default, Geneva/Tahoma, Cambia/Georgia.

I added the exact same code in the TwentyTwentyThree theme.json file and the Google fonts show up in the selector as expected.

I added the exact same code in the theme.json file from the theme that was made using your FSE theme generator and the Google fonts show up in the selector as expected.

I tried using the theme.json from the modified 2023 theme.json and also from the generated modified theme.json but still the only font families that show up are Default, Geneva/Tahoma, Cambia/Georgia.

Attached is the theme.json Please have a look and let me know what is missing. Thank you!
theme.json

Theme generator: Make the build tools optional

The build tools and processes are not required for the theme to work (they mainly minify and combine the CSS files), make them optional.

Menu links got trimmed (removed)

Themes created using the https://fullsiteediting.com/block-theme-generator/ are trimming the menu links. Looks like there are some limits are indirect trimming based on the length or so (But, unfortunately I couldn't yet figure it out). Strangely, when we switch to other themes like twentytwentytwo, all links are appearing in the menu.

posts page showing incorrect template

Hi @carolinan, first just wanted to thank you for your amazing https://fullsiteediting.com resource, it answers so many questions.

I'm using your theme generated site and I wanted to know if this is correct behavior or a bug:

Under reading settings -> Your homepage displays, I set one of my pages to the 'posts page'

When I navigate to my posts page it says its using 'page with sidebar template', however that doesn't appear to be the case, instead it's the index template that is actually being used by the posts page.

I did try some other full site editing themes, and they do in fact show index for the posts page or 'home' template in some cases.

Theme generated advance

Hi,

Found this when generated an advance theme:

When seeking help with this issue, you may be asked for some of the following information:
WordPress version 6.0.1
Active theme: Oxygen Base (version 1.0.0)
Current plugin:  (version )
PHP version 8.0.21



Error Details
=============
An error of type E_ERROR was caused in line 19 of the file /var/www/html/wp-content/themes/oxygen-base/patterns/footer-links.php. Error message: Uncaught Error: Call to undefined function oxygen_base_privacy() in /var/www/html/wp-content/themes/oxygen-base/patterns/footer-links.php:19
Stack trace:
#0 /var/www/html/wp-includes/block-patterns.php(326): include()
#1 /var/www/html/wp-includes/class-wp-hook.php(307): _register_theme_block_patterns('')
#2 /var/www/html/wp-includes/class-wp-hook.php(331): WP_Hook->apply_filters(NULL, Array)
#3 /var/www/html/wp-includes/plugin.php(476): WP_Hook->do_action(Array)
#4 /var/www/html/wp-settings.php(598): do_action('init')
#5 /var/www/html/wp-config.php(106): require_once('/var/www/html/w...')
#6 /var/www/html/wp-load.php(50): require_once('/var/www/html/w...')
#7 /var/www/html/wp-admin/admin.php(34): require_once('/var/www/html/w...')
#8 /var/www/html/wp-admin/themes.php(10): require_once('/var/www/html/w...')
#9 {main}
 thrown

Guess the oxygen_base_privacy function is not properly in use.

Broken link on FSE website to github repository.

Hi Carolina,

Love FSE. Searching on the website, it indicates in the contact page that if there are issues with FSE, to log them here.

It looks like you did a consolidation of the github lessons under a different directory. The following page has a broken URL
that points to the previous location:

https://fullsiteediting.com/lessons/how-to-use-php-templates-in-block-themes/

The previous location is referred under this section:

For this example, I will continue using the theme that we created in the previous lessons. You can download the sample theme with the basic templates and theme.json from GitHub.

https://github.com/carolinan/fullsiteediting/tree/course/Block%20based%20themes/Exercise%20-Theme%20json

Have a good New Year!

wp_enqueue_block_style path

I was looking into how to inline a block stylesheet and I saw references to "Stylesheets can opt in by adding path data using wp_style_add_data, and defining the file’s absolute path". I see here on line 38 of the starter themes that it includes a path but it's written different from the other arguments.

fullsiteediting/Starter themes/advanced-59/functions.php

Lines 35 to 39 in 29ee428

	$args = array(
	'handle' => "full-site-editing-$block_name",
	'src' => get_theme_file_uri( "assets/css/blocks/$block_name.min.css" ),
	$args['path'] = get_theme_file_path( "assets/css/blocks/$block_name.min.css" ),
	);

I'm pretty rusty with php, but should it be written more like the following? When I change it to that, it inlines my small css file.

'path'   => get_theme_file_path( "assets/css/blocks/$block_name.min.css" ),

Duotones on color options page

https://fullsiteediting.com/lessons/theme-json-color-options/
theme.json works as described, so I'm guessing the issue is how duotones are (not?) applied on that page.

Probably good to mention on this page that to apply a duotone, use the image block's "hover menu" circle icon.
I thought my theme.json duotone section was incorrect, since doutone didn't appear in the image block settings.

I would like to see Duotone as part of the Image Block settings panel, just like background color and gradient are for paragraphs and columns. (I know that is not a theme.json question...)

Is there a way to specify duotone for featured images in theme.json, maybe with a setting per page for which duotone to use? https://wordpress.org/themes/wei/ does this.

p.s. Here's the duotones I am defining (using the hex color codes for my primary and secondary dark colors and lightened versions of them).
"duotone": [
{
"colors": [ "#000000", "#ffffff" ],
"slug": "duotone-foreground-and-background",
"name": "Foreground"
},
{
"colors": [ "#0068a7", "#9ddbed" ],
"slug": "doutone-primary",
"name": "Primary"
},
{
"colors": [ "#20828c", "#cfe7c7" ],
"slug": "duotone-secondary",
"name": "Secondary"
},
{
"colors": [ "#0068a7", "#cfe7c7" ],
"slug": "primary-and-secondary",
"name": "Primary and Secondary"
}
],

Text bumping up against edge of browser window between certain breakpoint

Hi @carolinan!,

Between 1024px and 1400px (the wide size I choose in theme.json) the text content is right up against the edge of the browser window. Here's the relevant styles:

@media (max-width: 1024px)
main > :not(.alignfull), main .wp-block-query > :not(.alignfull), main .entry-content > :not(.alignfull):not(ul):not(ol), main .entry-content .wp-block-columns.alignfull p {
    padding-left: var(--wp--custom--h-spacing);
    padding-right: var(--wp--custom--h-spacing);
}

.wp-container-51 > .alignwide {
    max-width: 1400px;
}

The header is actually ok as you can see, but the post content is not.

The only solution I tried so far is to add a white background to the main group holding the post content which then added too much padding. To fix that I removed the custom media query listed above which was adding excess padding and then everything lined up beautifully.

You can also just set the left/right padding in the dimensions panel.

Then the problem is you can't add full width content that stretches edge to edge. I see some FSE themes like wpfrost using negative margins to combat that.

Or alignfull can get some padding and the main element can be alignfull and then each section can be wrapped in a group with either wide or full width depending on needs. In this case the custom media query would most likely also have to be removed.

What do you think?

Minimum PHP version error

Hi,
What is the minimum PHP version required for the advance theme generated using theme generator.
I got error with PHP 7.3.5
My Test Env
Local Flywheel
Wordpress 5.9-RC3-52619

Block patterns in the Advanced Theme Type trigger an error when using Gutenberg Plugin.

I'm using the Gutenberg plugin built from trunk 10d43678b3 with a Wordpress install of version 5.9.3.

I created an advanced theme using the generator and
upon activation I am met with errors for each block pattern file in the patterns directory of the theme. Each error is triggered from this line of the Gutenberg plugin's Wordpress 6.0 /lib/compat files

"Could not register file "/wordpress/wp-content/themes/advanced_generated/patterns/404.php" as a block pattern ("Slug" field missing)"

I was able to get rid of the error by disabling lib/compat hook that is trying to autoload the block patterns by adding the following to the theme's functions.php file:

function disable_guttenberg_plugin_pattern_loader() {
	remove_action ('init', 'gutenberg_register_theme_block_patterns');
}
add_action('after_setup_theme', 'disable_guttenberg_plugin_pattern_loader');

Custom CSS doesn't work on the frontend in classic themes

As reported in this issue:
WordPress/gutenberg#52644

custom CSS (the per-block one, at least) doesn't work on the frontend in classic themes with a theme.json file:
https://fullsiteediting.com/lessons/how-to-use-custom-css-in-theme-json/

Can you add a note indicating this, please?

FSE theme generator - theme is not recognized as FSE?

Hi!

Just dropped my child theme to twenty twenty-two approach and decided to use your generator to make my own theme from the ground up. However, on WP 5.9.1 and Gutenberg 12.7, the FSE-editor (i.e. the template editor) is not in the admin menu. I can get to it, sort of, via the poast/page editor. Also, the good old customizer shows up again (pretty sure that wasn't the case when TT2 was active).

Anyway, is this expected? Seems odd. Might have something to do with GB 12.7.

Problem with tooling

Hi!

What version of Node should I run in order get the tooling to work? Tried npm install and npm update but I can't get it to work. Seems to a dependency problem with eslint and stylelint. Tried different version of Node as well. Any ideas?

global $post is not available in block-pattern-helper.php

I'm not able to get the current post ID in https://github.com/carolinan/fullsiteediting/blob/course/Starter%20themes/basic-60/inc/block-pattern-helper.php#L18 using

global $post;

Because of this couldn't display different links for different pages (conditional using post ID).

contentSize doesn't work in theme.json file

On WordPress 6.5.2 version, in the theme.json file, I have a following code

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "800px"
    }
  }
}

But it doesn't work if editing any Post or opening Site Editor

Post Editing

Site Editor

Theme.json version 2 not loading styles

Hello,

I tried changing the theme.json version to 2, and once I do that, WP is not building global styles based on theme.json.
I checked and that is due to https://github.com/WordPress/WordPress/blob/master/wp-includes/class-wp-theme-json.php#L357

If I change this line or install the Gutenberg plugin it can't load styles. How are you dealing with this issue?

Fuzzy shadows?

Your theme generator is great - but somehow when I created an advanced one I get fuzzy shadows behind the post-titles, and cannot figure out why. I saw a text shadow line in theme.json and removed it, but that did not seem to solve it.

Duotone documentation not showing correctly

https://fullsiteediting.com/lessons/theme-json-color-options/#h-duotone

Bad Link: WordPress.org: Coloring Your Images With Duotone Filters

Duotones applied to https://fullsiteediting.com/wp-content/uploads/2020/05/wapuu-themes-by-carolina-baloon-250.png are not showing. Styles are not loaded.