CSS note

Group block

グループブロックは、5.3で実装される新しいブロックです。このブロックは、従来のブロックを複数選択してグループ化します。平たく言うと、div要素で、複数ブロックをラップします。
見出しや段落、といった複数のブロックをグループ化して、再利用ブロックとして登録することも可能なので、実用性の高い機能です。

グループブロックは、テーマのfunctions.phpで

add_theme_support( 'align-wide' );

が設定されている場合には、全幅画像などに対応したCSSを個別独自に実装しているため、レイアウトの問題が生じる可能性があります。

全幅設定のサンプルコードについては、ネガティブマージンの設定例がありますが、併せて、以下のようなスタイルも検討する余地がありそうだと思います。

margin-left: calc(50% - 50vw);

text-align テキストの左右揃え

従来は、以下のようなインラインスタイルで、テキストの左右揃えを行ってきましたが

<p style="text-align:right">…例えば、右揃えのこれのようなものです。</p>

5.3以降では、

<p class="has-text-align-right"> …例えば、右揃えのこれのようなものです。 </p>

インラインスタイルが、クラス名に変更になりましたので、独自テーマを作成している場合などでは、新たにテーマに対応したスタイルを追加しないと、右揃えや左揃えが、新規投稿では聞かなくなるといった問題がありそうです。

カラムブロック

カラムブロックでは、列ごとの幅を設定できるようになったため、has-x-columnsクラスは廃止されました。
テーマで、このクラス名に依存したCSSを設定している場合には、期待通りに機能しなくなるでしょう。

ヘアラインに色設定機能が追加

ヘアラインブロックに色設定機能が付くようになったので、色設定がない場合のみ、テーマのデフォルトの色設定を適用するべきとしている模様

設定サンプル

カスタムカラーパレットを設定している場合は、色設定機能はカスタムカラーパレットの色と同じになるので、必ずしも色設定が適用されていない場合の色だけというわけでもないようにも思う。

カラーパレット

<hr class="wp-block-separator has-text-color has-background has-alert-background-color has-alert-color">

最近の投稿ウィジェットブロック機能追加

投稿本文、概要、等を選択できる機能が追加されています。align-wideが設定されている場合、aliginfullクラスが追加された要素がオーバーフローしていないか確認をお勧めします。（ウィジェットブロックは、カラムブロックやグループブロック内に挿入される場合も少なくありません。）

テーブル要素のHTML構造を変更

tableブロックの機能は、強化されてthead tfoot　セルの左右位置揃え等機能が強化されているので、背景色付きスタイルなどが反映しなくなるケースが多いと思います。見直しをお勧めします。

また、galleryは、クラッシックエディタのショートコード、サイドバーのギャラリーウィジェット、それとブロックギャラリーのhtml構造は、それぞれ異なります。
一貫性がないので、それぞれCSSを記述する必要があります。類似したクラスも使われているためコンフリクトには注意が必要そうです。

従来

<table class="wp-block-table">
 <tbody>
 <tr>
<td>hello</td>
<td>world</td>
 </tr>
 <tr>
<td>hello</td>
<td>world</td>
 </tr>
 </tbody>
</table>

wordpress 5.3

<figure class="wp-block-table">
 <table class="">
 <tbody>
<tr>
 <td>hello</td>
 <td>world</td>
</tr>
<tr>
 <td>hello</td>
 <td>world</td>
</tr>
</tbody>
 </table>
</figure>

ギャラリーブロックのhtml構造

wordPress 5.2 gallery

<ul class="wp-block-gallery alignfull columns-2 is-cropped">
	<li class="blocks-gallery-item">
		<figure>
			<img src="https://cldup.com/n0g6ME5VKC.jpg" alt="">
		</figure>
	</li>
	<li class="blocks-gallery-item">
		<figure>
			<img src="https://cldup.com/ZjESfxPI3R.jpg" alt="">
		</figure></li>
	<li class="blocks-gallery-item">
		<figure>
			<img src="https://cldup.com/EKNF8xD2UM.jpg" alt="">
		</figure>
	</li>
</ul>

wordpress 5.3 gallery

<figure class="wp-block-gallery columns-2 is-cropped">
	<ul class="blocks-gallery-grid">
		<li class="blocks-gallery-item">
			<figure>
				<img src="https://cldup.com/n0g6ME5VKC.jpg" alt="">
			</figure>
		</li>
		<li class="blocks-gallery-item">
			<figure>
				<img src="https://cldup.com/ZjESfxPI3R.jpg" alt="">
			</figure>
		</li>
		<li class="blocks-gallery-item">
			<figure>
				<img src="https://cldup.com/EKNF8xD2UM.jpg" alt="">
			</figure>
		</li>
	</ul>
</figure>

ソーシャルメニューブロックの追加

ソーシャルメニューブロックが追加されます。スタイルのコンフリクトが発生していないか確認してみましょう。

PHPでブロックスタイルを登録するAPI

従来ブロックスタイルの追加は、javascriptを使っていましたが、PHPでもできるようになります。

Block Editor Theme-related updates in WordPress 5.3 – Make WordPress Core

ブロックスタイルを追加した場合、エディタ側のスタイル、フロントエンドのスタイル両方にスタイルが適用されますが、設定によっては、詳細度の関係でエディタ側と、フロントエンド用の、両方のスタイルを指定する必要があるかもしれません。

robot.txtの変更

「検索エンジンによるこのサイトのインデックス作成をやめる」オプションを選択した場合、
robot.txtに

Disallow: /\n

が、追加されなくなる模様

検証はしていないので、コアの変更部分をメモします。

従来

/**
 * Display the robots.txt file content.
 *
 * The echo content should be with usage of the permalinks or for creating the
 * robots.txt file.
 *
 * @since 2.1.0
 */
function do_robots() {
	header( 'Content-Type: text/plain; charset=utf-8' );

	/**
	 * Fires when displaying the robots.txt file.
	 *
	 * @since 2.1.0
	 */
	do_action( 'do_robotstxt' );

	$output= "User-agent: *\n";
	$public= get_option( 'blog_public' );
	if ( '0'== $public ) {
		$output .= "Disallow: /\n";
	} else {
		$site_url= parse_url( site_url() );
		$path = ( ! empty( $site_url['path'] ) ) ? $site_url['path'] : '';
		$output .= "Disallow: $path/wp-admin/\n";
		$output .= "Allow: $path/wp-admin/admin-ajax.php\n";
	}

	/**
	 * Filters the robots.txt output.
	 *
	 * @since 3.0.0
	 *
	 * @param string $output Robots.txt output.
	 * @param bool $public Whether the site is considered "public".
	 */
	echo apply_filters( 'robots_txt', $output, $public );
}

WordPress5.3より

/**
 * Displays the default robots.txt file content.
 *
 * @since 2.1.0
 * @since 5.3.0 Remove the "Disallow: /" output if search engine visiblity is
 * discouraged in favor of robots meta HTML tag in wp_no_robots().
 */
function do_robots() {
	header( 'Content-Type: text/plain; charset=utf-8' );

	/**
	 * Fires when displaying the robots.txt file.
	 *
	 * @since 2.1.0
	 */
	do_action( 'do_robotstxt' );

	$output= "User-agent: *\n";
	$public= get_option( 'blog_public' );

	$site_url= parse_url( site_url() );
	$path = ( ! empty( $site_url['path'] ) ) ? $site_url['path'] : '';
	$output .= "Disallow: $path/wp-admin/\n";
	$output .= "Allow: $path/wp-admin/admin-ajax.php\n";

	/**
	 * Filters the robots.txt output.
	 *
	 * @since 3.0.0
	 *
	 * @param string $output The robots.txt output.
	 * @param bool $public Whether the site is considered "public".
	 */
	echo apply_filters( 'robots_txt', $output, $public );
}

ナビゲーションにaria-label属性サポート

5.3の機能強化：ナビゲーションにaria-label属性が追加される – WordPress私的マニュアル

画像サイズ

Introducing handling of big images in WordPress 5.3 – Make WordPress Core
5.3への準備：投稿写真を使っているサイトは準備しておこう – WordPress私的マニュアル

テーマサポート(html5)にstyle scriptが追加

function.php などで、add_theme_support('html5,array())に、style,scriptを追加すると、type属性が省略されます。

		add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

新着記事