Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

WordPress 5.9 with emulsion Theme

Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

WordPress 5.9 with emulsion Theme

In WordPress 5.9, the customizer has not taken the lead, and a new editor (site editor) has taken the lead.

The new editor allows everyone to consistently change settings to their liking, such as changing to a grid layout, changing colors, showing or hiding the posting date, showing or sizing the poster icon, etc. became.

The template system has been completely redesigned and changed from the traditional PHP template to the HTML template system, which also makes it possible to create and save templates in the editor.

If you use a Classic theme, you can still use it.WordPress Themes: Full Site Editing Free will you be able to operate with new features.

In general,the Classic theme and the full site editing theme (block theme) are not compatible.

Emulsion Theme is a universal theme that allows you to display the content you value with the latest WordPress features, as well as classic features that have been stable for over 10 years.

Please know

You can change the behavior of the theme in the theme scheme of the theme customizer.

Switch the operating state of the theme 3 There is this setting

Full Site Editing Theme 

You can use the latest features available in the editor (site editor).

FSE Transitional Theme

Display the main content of the post in the HTML template system. Useful if you need a sidebar.

Classic Theme

Displays posts created in the block editor or classic editor in the PHP template system.

Please note that the theme filters and template tags will not work except for Classic Theme.

If you make the above settings, other settings in the customizer will also change, so save them immediately after making the settings, view the blog once, and then reopen the customizer.

Editing a post

When using the slash inserter and block search in the block editor, it is useful to remember the following small tips.

For example, if you want to enter the h3 element with a slash inserter

/h3

Now you can enter the h3 element.

This is convenient because you don’t have to let go of the keyboard and select the heading level with the mouse.

Template hierarchy

The template hierarchy is a rule that associates template application conditions by file name. The template name of the editor can be named using the template hierarchy.

Editor (full site editor) supports テンプレート階層 Only primary and secondary templates are available. Please note that variable templates are not supported in the Editor.

“Not supported in Editor” If you dig a little deeper

If the theme comes with a template

If your theme uses, for example, the template name of the template hierarchy associated with the post type single-post.html, this template will take effect instead of single.html or singular.html.

Newly created templates for individual posts and fixed page templates are custom templates. This template has nothing to do with the template hierarchy.

Templates corresponding to the template hierarchy can only be edited

Additional CSS

Additional CSS is set on the theme side so that it will not be displayed when the operating state of the theme of the customizer is other than Classic Theme.

Full Site Editing Theme and FSE Transitional Theme settings, if absolutely necessary、

Customize / Theme Scheme

You can use it by enabling it in Site Editor with Custom CSS.

Please note that if enabled, the ruleset set in Custom CSS will be CSS applied regardless of the theme’s behavior settings.

If you want to apply the style only for a specific operating state, please utilize the following class included in the body element.

is-presentation-fse, is-presentation-transitional, is-presentation-theme

About Block Petterns

Block patterns are a useful feature, especially for beginners. What you used to do with the customizer’s Additional CSS can now be easily customized with style, color, typography, and more in the right sidebar.

We don’t recommend doing anything like additional CSS to pattern blocks or writing custom styles in the theme’s style.css.
We are not ready for a class or the like to ensure block-by-block specificity for such work.

Known issues

The length of the summary text becomes abnormally long on archive pages, etc.

In languages such as Japanese, Chinese, and Korean that do not use spaces to separate words, the length of the summary sentence cannot be detected properly and becomes long.

Solution for this issue: Match the language that describes the language setting

This theme has the problem that it cannot be saved if you open the customizer without using the gutenberg plugin.

Occurs in WordPress 5.8 and can be saved in WordPress 5.9 without any problems.

Solution to this problem: Remove the full-site-editing tag from the comments Tags: in style.css.

When Customize / Theme Scheme / Header Template HTML is selected, Can not find template is displayed and the block header is not displayed.

Occurs in WordPress 5.8, not in WordPress 5.9.

Solution for this issue: Not found.

2022/2/3 追記

In the editor / style, the color scheme of the page and the color scheme of each block are now set.

If you make these settings,<style id="global-styles-inline-css">Will be embedded in the header

In the case of emulsion theme, the style is loaded regardless of the theme operation mode setting, so if it is operating as a full site migration theme or classic theme, unintended changes will be made.

Specifically, it should be added to the body element (I personally think that .wp-site-blocks should be added, but it is necessary to keep an eye on future developments.)

body{
background-color: var(--wp--preset--color--black);
color: var(--wp--preset--color--white);
font-family: var(--wp--preset--font-family--helvetica-arial);
font-size: var(--wp--preset--font-size--normal);
line-height: var(--wp--custom--line-height--common);
}

Regarding the color scheme of the body element, CSS was overwritten to eliminate the effect.(ver 2.2.3)

If you change the color scheme of the heading block,

h1, h2, h3, h4, h5, h6 {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
}

https://wordpress.org/support/topic/how-to-disable-inline-styling-style-idglobal-styles-inline-css/

If you change the color scheme of the block, you haven’t done anything so far.

Please be aware that changing the block color scheme in the editor can affect it regardless of the theme’s operating mode.

Copyright © 2022 Site proudly powered by WordPress