WordPress 6.0 and emulsion Theme

WordPress 6.0 adds the ability to choose a color scheme in the site editor.

The emulsion theme had this feature implemented earlier as of 5.9, but it’s generally working as expected.

A notation has also been added that makes it easy to enter links within the site.

You can search for post links by typing the following at the beginning of the paragraph

[[検索文字

Stack has been added to the group block.

It is a function to “horizontally” and “vertically stack” child blocks.

Side by side is very similar to a column block, but the width of each can not be adjusted, but since it can be switched by the class name of the block, you can replace the class name depending on the conditions with javascript etc. You can change the layout. (Is-flex-container, is-vertical class)

Please note that in the emulsion theme, the “vertical stacking” feature is currently different from the standard behavior of the core.

Vertical stacking in the emulsion theme uses the function for position control.

Many of the full site editing themes, including the default theme, currently show the phenomenon that the group block shifts sideways as described above.

Therefore, when vertical stacking is set, it is used as a function that can be displayed as follows.

It may change in the future, but as a negative effect, the vertical layout function does not work. note that.

For the responsive setting when arranging side by side, if you select the group style responsive, the side by side will be canceled according to the browser width.

Theme-specific changes

In the paragraph, I set a space for one line when nothing is entered. Personally, it’s convenient because it saves you the trouble of entering spacers.

デフォルトテーマとの違い

There are some differences between the default theme and the emulsion theme in the basic design of the theme.

Content Width

The default width for all blocks, such as paragraphs, is the content width.

The difference occurs when the block is wrapped in a group block.

Let’s take a look at the paragraph elements when the full width is set in the group block.

emulsion theme

Twenty Twenty Two

In the emulsion theme, child blocks within full or wide blocks are always maintained at the default content width, while in the default theme they are wider.

In the group element, the child block does not have the full width and wide menu, and the right-justified and left-justified menus are not displayed, but you can change the width with the layout function of the block group. (Alternatively, you can enter the (alignwide, alignfull, alignleft, alignright) class directly in the additional CSS class)

alignleft,alignright (Handling of float content)

The alignleft width and alignright width of the emulsion theme are basically half the size of the main area.

This is where both alignleft and alignright work, and we’re doing this to prevent text from flowing in by halving it exactly.

However, some blocks (search, social links, buttons, etc.) do not require much width, and we have added a narrow width setting.

  • wp-block-social-links
  • wp-block-file
  • wp-block-search
  • wp-block-latest-comments
  • wp-block-archives
  • wp-block-categories

Added a class to individually solve the problem that subsequent blocks wrap around the gap.

  • clear-float
  • clear-left
  • clear-right
  • clear-none

I think it’s best to keep alignleft and alignright to a minimum anyway.

The difference between emulsion and twenty twenty two’s alignleft and alignright is as follows.