debug – Theme emulsion

“Human skull drawing, vintage Halloween“/ CC0 1.0

<?php echo 'hello world'; ?>

Full site editor support is planned for WordPress.
WordPress 5.8 has made some iconic changes to pave the way.
The emulsion theme is preparing to function as a full site editor support theme in WordPress 5.8.
You can still test 5.8 wid the beta tester plugin

Full site editing

currently an experimental feature.

The emulsion theme implements a changeover switch for using the theme in the customizer with normal theme functions, transitional mode for transition preparation, and FSE (Full Site Editing mode). In order to actually use this function,

WordPress 5.8
Gutenberg Plugin （required）
emulsion-addons Plugin (recommend）

The above conditions must be met.

The emulsion theme has a built-in full site editor theme function.

Differences from general full-site editor compatible themes

	full Site editor theme	emulsion theme
Customizer	hide	theme mode : Show FSE mode: Hide Transitional mode: Show
Site Editor	Show	theme mode : hide FSE mode: Shorw Transitional mode: Show
Widget	Show	theme mode : Show FSE mode: Show Transitional mode: Show
NEW Template	Please check each theme	404.html archive.html category.html home.html index.html page.html privacy-policy.html search.html single.html tag.html taxonomy.html the-blank.html the-front-page.html
NEW Template parts	Please check each theme	footer.html header.html page-footer.html page-header.html post-footer.html post-header.html rich-header.html taxsonomy.html theme-front-page-demo.html

Classic Editor

Supports CSS that supports HTML output by the classic editor

Block Editor

Supports CSS that supports HTML output by the block editor.

Classic Widget

Supports CSS for older types of widgets that the core supported.

New Widget Area

Testing is currently underway and I think we can generally support it.

We have taken into account the general usage environment, but if you find any bugs, please let us know.

The emulsion theme is the only theme at the moment that allows you to peep into the future of the template system to see how the new template system of the future will affect the site you operate, while having the functions of the existing theme. ..

How to enable FSE in emulsion theme

What is the site editor?

The block editors are specialized for editing posts, but WordPress also has archive pages, search pages, category pages, and more.

This is an editor for editing templates that could not be edited with the post editor in the past.

The edited template is saved in a custom post type, so you can save your template changes without having to create a child theme.

The created templates are listed in Appearance / Templates, Appearance / Templates part.

Old template and new template

New widget area

Previously, only widgets could be placed in the widget area, but now all blocks can be freely placed in the new widget area.

This change is unconditional. Please note that this will change on all sites.

As a negative effect, there may be problems with the behavior of some plugin widgets and theme custom widgets.

Classic Widgets – WordPress Plugin Plugin has been prepared to maintain the traditional widget area

Known issues and caveats

Emulsion theme child theme

The emulsion theme is being prepared as a full-site editor-compatible theme, but the child theme does not work as a full-site editor theme. It works with the same functions as before.

Theme.json

When FSE mode is set, the header font size and base font size can be changed from this file.

When Theme mode is set, the font size set in the customizer is applied.



settings{ blocks { core/paragraph{ color{ pallete } } } }

The pallet settings are not currently working. It worked in previous versions, so I've left it for future confirmation.

About the template selection drop-down list on the post edit screen

In Theme mode

“archive”, “home”, “search”, “category”, “category”, 404, “tag”, “taxonomy”

The new template type above does not appear in the choices.

emulsion + emulsion-addons In an environment that uses a version other than the latest version, a fatal error will occur, so use the latest version.

Theme customization Tips

WordPress has begun to make major changes to its traditional template system.

Themes that use the traditional template hierarchy and the new full-site editing themes are currently incompatible.

For those who are currently running WordPress and are thinking about migrating to a new template system, migrating from the current template system to the new template system can be a daunting task.

If you need to use a PHP template for a theme you are using in FSE mode.

function my_custom_template_include( $template ) {

	$post_id = 34588;
	
	if ( is_single( $post_id ) ) {

		$new_template = locate_template( array( 'single-post-'.$post_id.'.php' ) );

		if ( '' !== $new_template ) {

			return $new_template;
		}
	}

	return $template;
}

add_filter( 'template_include', 'my_custom_template_include', 21 );

The above filter will be displayed using the single-post-34588.php template if the post id is 34588.

How to determine which template is applied

This theme uses both PHP and HTML templates, so it’s hard to tell which template you’re using, but you can check it in the following ways.

Check the HTML source body element.

is-tpl-****_template

If there is a class with a saffix called _template, the HTML template is being used.

is-tpl-****-php

If there is a class with saffix called -php, then the traditional PHP template is used.

About customization with CSS

Note

In the full site editor, there is a function that allows you to set the color from the editor screen by setting the color scheme for each block and the Grobal Style.

For this reason, we do not recommend customizing CSS in FSE mode.

This theme bundles all the HTML-enabled CSS of the WordPress 4.7 classic editor era, the HTML-enabled CSS of the latest block editors, and the CSS for full-site editing.

Because it is a general-purpose theme, anyone who uses a classic editor, a block editor, or anyone who wants to move to FSE does it so that the layout of the site will not be significantly corrupted.

When customizing with the customizer’s custom CSS etc., you can specify the style more reliably by adding the ID #emulsion and describing it.

Example

#emulsion h2{ color:blue; }

Example 2 Apply CSS only in FSE mode

.is-presentation-fse h2{ color:blue; }

If you want to change the CSS only in a specific mode, you can use it in combination with any of the is-presentation-transitional, is-presentation-fse, and is-presentation-theme classes.

It is not recommended to use it in FSE mode at this time because it will be possible to specify the color for each block in the site editor. (In FSE mode, it’s also more difficult to apply styles because #emulsion doesn’t exist)

Theme CSS coverage

Use PHP template (customize / Full Site Editor / Theme default) CSS is applied to each CSS in emulsion / css)

Use HTML template (customize / Full Site Editor / Full Site Editor) For CSS, the settings in theme.json are used. Please note that the customizer color settings do not apply as it is experimental).

Other

(require emulsion-addons plugin)

The post and page editor has an item called ”Style/Remove All Style, Script”. In this item, you can remove the theme style and remove the script by selecting Remove theme style and script, and you can also display only the core block style.

You can also describe the style for posting by creating a custom field “CSS” and describing the style on each post and fixed page.

When you create a custom field, the has-custom-style class will be added to the body element, so

/*has-custom-styleに、CSS変数をセットしたり*/

.has-custom-style{
 --thm_background_color:#ff3333;
 --thm_general_link_color:    #cccccc;
 --thm_general_link_hover_color:#ffffff;
 --thm_general_text_color:#ffffff;
 }
/*または、以下のように記述できます。*/

#emulsion.has-custom-style h2{ color:blue; }

It works regardless of mode, but you should avoid using it in FSE mode as much as possible

When used in FSE mode, it is difficult to switch between display and non-display because there is no conditional tag that was often used in the past.

Since PHP conditional tag cannot be used, for example, if the search result is 0, the posting screen may become blank.

I don’t know how it will be improved in the future, but in the case of this theme

In search.html, prepare the following block

<!-- wp:group {"align":"wide","className":"emulsion-not-found vh50 centered"} -->
<div class="wp-block-group alignwide emulsion-not-found vh50 centered">
    <!-- wp:heading -->
    <h2>No results</h2>
    <!-- /wp:heading -->
    <!-- wp:search {"label":"Search","buttonText":"Search"} /-->
</div>
<!-- /wp:group -->

The body element class search-no-results class is displayed only when it exists.

WordPress uses class name rules like BEM in recent block editors, but in the front end, the body element class is multi-class, and it works in a way similar to OOCSS.

I’m sure there are a lot of people who hate body class, but it might be a good idea to reconsider.