両方作って感じたブロックテーマとクラシックテーマの違い

両方作って感じたブロックテーマとクラシックテーマの違い

先日ブロックテーマMoneを発売しました。

作ってみて感じたクラシックテーマとブロックテーマの違いをまとめてみました。

クラシックテーマブロックテーマ
WordPress5.9 登場(2022年)
フックを使ったカスタマイズ(PHP)ブロックを使ったカスタマイズ(JavaScript,PHP,React)
カスタマイザー/ウィジェットでカスタマイズサイトエディタからブロックでカスタマイズ
カスタマイズしたデータはwp_optionsテーブルに入るカスタマイズしたデータはwp_postsテーブルに入る。リビジョンで復元やリセットが出来る
ヘッダー、フッター、404ページやアーカイブページなどは直接編集出来ないサイトエディターからブロックを使用してテンプレートを直接編集出来る
すべてのページでブロックのCSS,JSを読み込む使っているページのみブロックのCSS,JSを読み込む
wp_head の後でブロックを作るwp_headより前でブロックを作る
ヘッダーでブロックのCSSやJSを読み込める
デフォルトテーマでクラシックテーマはTwenty Twenty-OneまでTwenty Twenty-Two以降デフォルトテーマはブロックテーマ

どちらも基本的にはという意味で考えてください

ブロックテーマでもPHP関数は使用しますし、クラッシックテーマもアーカイブページや404がカスタマイズできるものなどもあります

一つ重要なのはデフォルトテーマがブロックテーマということです。

基本的にWordPressコアコントリビューターはデフォルトテーマで動作確認をして開発をしています。

なのでクラシックテーマでは大きな機能追加などが行われにくくバグの改修が後回しになりがちな印象です。

wp_headより前でブロックを作る。ヘッダーでブロックのCSSやJSを読み込める

というのはブロックテーマは以下のテンプレートが使われてサイトをレンダリングします。

		
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<?php /** * Template canvas file to render the current 'wp_template'. * * @package WordPress */ /* * Get the template HTML. * This needs to run before <head> so that blocks can add scripts and styles in wp_head(). */ $template_html = get_the_block_template_html(); ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <?php echo $template_html; ?> <?php wp_footer(); ?> </body> </html>

get_the_block_template_html()do_blocksされるのでwp_headより前でブロックの情報を取得できる形になります。

		
236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305
/** * Returns the markup for the current template. * * @access private * @since 5.8.0 * * @global string $_wp_current_template_id * @global string $_wp_current_template_content * @global WP_Embed $wp_embed WordPress Embed object. * @global WP_Query $wp_query WordPress Query object. * * @return string Block template markup. */ function get_the_block_template_html() { global $_wp_current_template_id, $_wp_current_template_content, $wp_embed, $wp_query; if ( ! $_wp_current_template_content ) { if ( is_user_logged_in() ) { return '<h1>' . esc_html__( 'No matching template found' ) . '</h1>'; } return; } $content = $wp_embed->run_shortcode( $_wp_current_template_content ); $content = $wp_embed->autoembed( $content ); $content = shortcode_unautop( $content ); $content = do_shortcode( $content ); /* * Most block themes omit the `core/query` and `core/post-template` blocks in their singular content templates. * While this technically still works since singular content templates are always for only one post, it results in * the main query loop never being entered which causes bugs in core and the plugin ecosystem. * * The workaround below ensures that the loop is started even for those singular templates. The while loop will by * definition only go through a single iteration, i.e. `do_blocks()` is only called once. Additional safeguard * checks are included to ensure the main query loop has not been tampered with and really only encompasses a * single post. * * Even if the block template contained a `core/query` and `core/post-template` block referencing the main query * loop, it would not cause errors since it would use a cloned instance and go through the same loop of a single * post, within the actual main query loop. * * This special logic should be skipped if the current template does not come from the current theme, in which case * it has been injected by a plugin by hijacking the block template loader mechanism. In that case, entirely custom * logic may be applied which is unpredictable and therefore safer to omit this special handling on. */ if ( $_wp_current_template_id && str_starts_with( $_wp_current_template_id, get_stylesheet() . '//' ) && is_singular() && 1 === $wp_query->post_count && have_posts() ) { while ( have_posts() ) { the_post(); $content = do_blocks( $content ); } } else { $content = do_blocks( $content ); } $content = wptexturize( $content ); $content = convert_smilies( $content ); $content = wp_filter_content_tags( $content, 'template' ); $content = str_replace( ']]>', ']]&gt;', $content ); // Wrap block template in .wp-site-blocks to allow for specific descendant styles // (e.g. `.wp-site-blocks > *`). return '<div class="wp-site-blocks">' . $content . '</div>'; }

そして現時点ではクラシックテーマが自動的にブロックテーマになることは無いです

例えばクラシックテーマのTwenty Twenty Oneがアップデートを経てブロックテーマになることは無いという意味です

なのでブロックテーマにしたいとおもったらブロックテーマをインストールしてテーマを切り替える必要があります。

最後に

最後にブロックテーマとクラシックテーマの推移を予想したいと思います。

なんとなく僕の予想はこんな感じです。

ブロックテーマは徐々に徐々に盛り上がっていくと思います。

ただWordPressは長く使われているので、既存のサイトをすべてブロックテーマに変えるのは大変です。

でも、新しいサイトを作るなら、ぜひブロックテーマを試してみてください! 直感的な操作で、自由なデザインが楽しめます。

まだブロックテーマを使ったことがない方は、一度試してみる価値ありですよ。

ご意見等ありましたらこちらのポストにコメントください。それでは👋