emulsion today

Updated :

Custom page template (php)

When I checked version 17.4.1, I noticed that the post template selection was no longer displayed in the first place in the classic theme.

Block themes allow you to select custom templates, but you can no longer select classic PHP templates.

The emulsion theme previously allowed you to select custom templates in PHP format, but this is no longer the case.
The sample 2col-has-widget-area.php is inside the classic template holder, and this template can no longer be selected in either classic theme mode or block theme mode. .

Therefore, I would like to briefly explain where custom templates are saved and how to change them.

Get the currently used template

The custom template applied to posts is stored in a hidden custom field called _wp_page_template, so you can check it by adding the following code to your theme’s functions.php.

<?php
get_post_meta($post_id,'_wp_page_template', true);
?>

ブロックテーマモードで使用している場合は

<?php
add_action('wp_body_open',function(){

$post_id= get_the_ID();

var_dump(get_post_meta($post_id,'_wp_page_template', true));

});
?>

By rewriting the value of _wp_page_template, you can display the desired template.

emulsion 3.0.7 Addition and removal of templates

Migrate the theme’s layout functionality from block templates to the site editor’s block addition functionality.

Block addition in the site editor refers to the modal box that appears when you click the red frame below on the template page of the site editor.

For example, when you click on the front page, the following four layout patterns will be displayed.

Click on the pattern you like to apply it.

This allows you to select a layout intuitively, without having to open a template and make detailed adjustments to get the layout you want.

There is a pattern that includes a sidebar, but this sidebar itself is also a dynamic pattern using template parts.

This sidebar pattern change will be reflected in the entire sidebar, but by changing this part, you can also create a page-specific sidebar. (Pattern category sidebar is newly added in 3.0.7.)

There is a pattern that includes a sidebar, but this sidebar itself is also a dynamic pattern using template parts.

To achieve this functionality, we will largely remove traditional block templates.

Obsolete template

  • templates/search.html
  • templates/404.html
  • templates/category.html
  • templates/tag.html
  • templates/archive.html
  • templates/home.html

By default, these obsolete templates use index.html to display.

Newly added pattern

Add pattern for archive template selection

  • patterns/page-archive-grid.php
  • patterns/page-archive-sidebar.php
  • patterns/page-front-page-sidebar.php
  • patterns/page-front-page.php
  • patterns/page-home-grid.php
  • patterns/page-home-sidebar.php
  • patterns/page-search-full-text.php
  • patterns/page-search-grid.php
  • patterns/page-single-sidebar.php
  • patterns/page-404.php
  • patterns/404.php

Technical notes

If you select a pattern template, it is not possible to determine which pattern is applied. This may come into use when customizing the design of pages to which these patterns are applied.

For this reason, in the emulsion theme, we added a new class to the body element.

If the front page uses a pattern template, is-wp_template-front-page is added

In addition, we have added a class that supports patterns to the header element directly under .wp-site-blocks, so you can also write detailed styles etc.

pattern fileheader class
patterns/page-archive-grid.phpis-pattern-archive-grid
patterns/page-archive-sidebar.phpis-pattern-archive-sidebar
patterns/page-front-page-sidebar.phpis-pattern-front-page-sidebar
patterns/page-front-page.phpis-pattern-front-page
patterns/page-home-grid.phpis-pattern-home-grid
patterns/page-home-sidebar.phpis-pattern-home-sidebar
patterns/page-search-full-text.phpis-pattern-search-full-text
patterns/page-search-grid.phpis-pattern-search-grid
patterns/page-single-sidebar.phpis-pattern-single-sidebar
patterns/page-404.phpis-pattern-404

subsequent-sibling combinator – CSS: Cascading Style Sheets | MDN

Precautions for operation

If you cancel the operation after pressing the Add Template button, an empty template will be created and an error screen like the one below will appear.

If you press the site edit button on the page displayed above and click the three vertical dots button to delete it, it will return to the default template.

Regarding the heading level of the post title,

In emulsion 3.0.7, change the heading level of the post title of individual posts and fixed pages.

In the emulsion theme, the site title has traditionally been H1 and the post title H2, but since the title of the post editor is set to H1, the outline function in the list view can be used to change the headings in the content to H3. When I use it, an error message appears, so I decided to make some adjustments. For individual posts, the site title will be displayed as a p element. (Appearance is the same as before)

About sanitizing custom HTML blocks

Currently (for a while now) custom HTML blocks allow you to write style elements and script elements without any restrictions.

For example, in the wordpress.com explanation, Custom HTML Block – Japanese Support

However, since I haven’t been able to find anything that explains this on wordpress.org, I’d like to give you an example of sanitization.

Sanitize html block

<?php
add_filter( 'render_block_core/html', 'emulsion_sanitize_block_html' );

if ( ! function_exists( 'emulsion_sanitize_block_html' ) ) {

function emulsion_sanitize_block_html( $html ) {
return wp_kses_post( $html );
}
}
?>

The whitelist is filtered by theme

@see add_filter( ”wp_kses_allowed_HTML”, …