常連

WordPressで、プラグインとして独自のブロックを作っておりますが、

作ったカスタムブロックへリッチテキストを保存したあとに画面を更新すると、「このブロックには想定されていないか無効なコンテンツが含まれています」と表示されてしまいます。

ブロックはNode.jsでビルドしており、ビルド前のsrcは下記です。
```src
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { InspectorControls, RichText } from '@wordpress/block-editor';
import { PanelBody, RadioControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

registerBlockType( 'my-block/sample', {
    title: 'テスト',
    icon: 'block-default',
    supports: {
        className: false,
    },
    attributes: {
        h2Text: {
			type: 'array',
			source: 'children',
			selector: 'div',
		},
		h2Style: {
            type: 'string',
            default: 'wp-block-subhead-style-01',
        }
    },
    example: {
        attributes: {
			h2Text: ''
		},
    },
    edit: ( props ) => {
        const {
            className,
            attributes: {
                h2Text, h2Style
            },
            setAttributes,
        } = props;
        
        const onChangeText = ( value ) => {
			setAttributes( { h2Text: value } );
		};
		
		const onChangeStyle = ( value ) => {
			setAttributes( { h2Style: value } );
		};
		
        return ( [
            <div className={'wp-block-subhead-wrap ' + h2Style}>
                <RichText
                    tagName="div"
                    className={ 'wp-block-subhead-inner' }
                    value={ h2Text }
                />
            </div>
            ,
            <InspectorControls key="setting">
                <PanelBody title="見出し設定">
                    <RadioControl
						label="見出しスタイル"
						help=""
						selected={ h2Style }
						options={ [
							{ label: 'スタイル 01', value: 'wp-block-subhead-style-01' },
	                        { label: 'スタイル 02', value: 'wp-block-subhead-style-02' },
	                        { label: 'スタイル 03', value: 'wp-block-subhead-style-03' }
						] }
						onChange={ onChangeStyle }
					/>
                </PanelBody>
            </InspectorControls>
        ] );
    },
    save: ( props ) => {
        const {
            className,
            attributes: { h2Text,h2Style },
        } = props;
        return (
            <div className={'wp-block-subhead-wrap ' + h2Style}>
                <RichText.Content
                    tagName="div"
                    className={ 'wp-block-subhead-inner' }
                    value={ h2Text }
                />
            </div>
        );
    },
} );
```

「解決」を押して前後のコードを見比べても変化がなく、
divの中にdivを入れているだけの簡単なコードにも関わらず
このようなエラーが出てしまいます。

ちなみに「リカバリーを試行」を押すと、消えてしまいます。

なぜこのようなエラーが出てしまうかまったくわからず、
どこに原因があるのかご存知の方がいらっしゃいましたら、
ご教授いただけますと幸いです。

### バージョン等
WordPress：5.8
テーマ：Twenty Twenty-Oneバージョン: 1.4
利用中の他のプラグイン：なし

WordPressのGutenbergブロック開発で「このブロックには、想定されていないか無効なコンテンツが含まれています」と出てしまう

### 前提

今回、解決したい問題は、
ブロックエディタの編集画面のスタイリングと
実際の画面のスタイリングをできるだけ
同じようにしたいと思っています。

オリジナルのブロックを追加しているのですが
そこで困っているのが色の反映です。

### 現在の仕様
サイトのカラー設定をカスタムフィールドを使って
一括変更できるようにしています。
color-template.php　というテンプレート内の内容を
header.phpで呼び出し、
:rootで指定されるカラーをインライン化して
style.cssに適用されるようにしています。

以下が
color-template.phpの内容です。

``` 
<?php
    $pageID = 2405;
	$radio = get_field('color_templete',$pageID);
	if( $radio === "red_01"):
?>
    <?php if ( have_rows( 'set_1',$pageID ) ) : ?>
    <?php while ( have_rows( 'set_1',$pageID ) ) : the_row(); ?>
    <?php
        $dark = get_sub_field('color_dark');
        $main = get_sub_field('color_main');
        $light = get_sub_field('color_light');
    ?>
    <?php endwhile; ?>
    <?php else : ?>
    <?php endif; ?>
<?php elseif( $radio === "red_02"): ?>
    <?php if ( have_rows( 'set_2',$pageID ) ) : ?>
    <?php while ( have_rows( 'set_2',$pageID ) ) : the_row(); ?>
    <?php
        $dark = get_sub_field( 'color_dark' );
        $main = get_sub_field( 'color_main' );
        $light = get_sub_field( 'color_light' );
    ?>
    <?php endwhile; ?>
    <?php else : ?>
    <?php endif; ?>
.
.
省力
.
.
<?php endif; ?>
<style type="text/css">
    :root {
        --color0:<?php if($light){echo $light;}?>;/*とても薄い 50-200*/
        --color1:<?php if($main){echo $main;}?>;/*薄い 300-400*/
        --color2:<?php if($dark){echo $dark;}?>;/*メイン 500-600*/
        --colorG:#E0E0E0;/*グレー*/
        --colorB:#212121;/*ブラック*/
    }
</style>
```

この情報がstyle.cssで
```
    color: var(--color1);
```
のように書いてある箇所に反映される仕組みです。

### 解決したいこと

例えば、もともと『赤』を選択していて、
色の変更をしようと思いcolor-template.phpで『青』を選択した場合、
サイト全体の配色がもともと設定している青色のカラーコードが読み込まれるのですが、
実際の画面は色の変更がされますが、編集画面は変わりません。

ブロックエディタの場合、
編集画面用のCSSと実際の画面のCSSが必要になると思うのですが、
ここの紐づけが上手くできるようにしたいと思っています。

編集画面用のCSS：『acf.css』
実際の画面用のCSS：『style.css』

これをfunctions.phpで

```
<?php //ブロックエディタCSS適用
add_action('after_setup_theme', 'block_editor_css');
function block_editor_css() {
  add_theme_support('editor-styles');
  add_editor_style('style.css'); //実際の画面用CSS
  add_editor_style('acf.css'); //ブロックエディタ編集画面用CSS
}
?>
```
と切り分けて読み込んでいますが
現在の仕様では、『color-template.php』の内容を
編集画面用のCSS『acf.css』に適用できずに悩んでいます。

『color-template.php』でサイトの配色を一括変更した際に
編集画面の配色も一括変更されるようにしたいということです。

分かりづらい質問で申し訳ございませんが
お力添えいただけますと幸いです。

【Wordpress ブロックエディタ (gutenberg)】の編集画面と実際の画面のスタイリングを同じにしたい

オリジナルテーマを作成中です。
Gutenbergのエディタ上の表示とフロント側の表示を同じにしようとしています。
style.cssでリセットcssを最初に入れているので、フロント側にエディタからのスタイルが悉く付かなくなってしまっています。the_content()で読み込む部分だけ、style.cssとは別にする方法はないでしょうか？
他にも何か解決方法をご存じの方、アドバイスお願いします。

（エディタとフロントを同じにする為には、フロント側にstyle.min.cssがあり、theme.min.cssを追加したり、エディタ側にはeditor-style.cssでスタイリングする辺りのことは調べました。現状はそれ以前のようです。）

**試したこと**
the_content()で読み込む部分にクラス名（例えば.single__content）をつけて、スタイルをつけることは出来ました。
よく使う見出しなどはそれでいいのですが、Gutenbergにあるブロック全てに対応するスタイルを全てオリジナルでつけるのは大変だと思いました。リストもネスト化したものに対してどうスタイルをあてておけば良いのか？？
希望としては、テスト記事データ(theme-test-data-ja)の「HTML タグとフォーマット」に含まれる要素がすべて表示乱れのないようにしたいので、リセットcssを外す必要があると考えました。

ブロックエディタとリセットcss

サクラエディタで完全一致を検索したいです。

$payment

に完全に一致するものを検索したいです。

どのように書けばよいですか？

/^$payment$/

のように記述し、正規表現にチェックを入れてもヒットしません。

サクラエディタで完全一致を検索したい

### 前提・実現したいこと

現在wordpressにて開発を進めております、
全ページをブロックエディタで作成をしましたが、
固定ページのある特定ページ(page-works.php)だけクラシックエディタにしたいです。

### 試したこと

[固定ページでGutenberg（ブロックエディタ）を無効化する方法](https://irodory.jp/web/wordpress/customize/5456)

```wordpress
add_filter( 'use_block_editor_for_post_type', 'hide_block_editor', 10, 10 );
function hide_block_editor( $use_block_editor, $post_type ) {
  if ( $post_type === 'page' ) return false;
  return $use_block_editor;
}
```

調べましたら、上記のようなブログ記事に行き当たりました。
しかし上記方法だと固定ページ全部がクラシックエディタになってしまいました、
特定のページ(page-works.php)のみをクラシックエディタに変更する方法はどうすれば良いでしょうか。
お手数ではございますが、知恵をお貸しください。

### 補足情報（FW/ツールのバージョンなど）

wordpress 5.8

wordpress　特定の固定ページだけをクラシックエディタに変更したい。

### WordPressレッスンブック5.X対応版で勉強している初学者です。

現在上記で明記した書籍のSTEP3-2をやっておりまして、functions.php内でwp-block-stylesを指定してグーテンベルグのCSSをフロント？に適用させることを実現させるようなのですがうまくいきません。
　
### 発生している問題
![イメージ説明](272564fd29be62ad0896256ff4947b6b.png)

黄色で囲った部分が教本だとtheme.min.cssになるようです。


### 該当のソースコード

```ここに言語名を入力
<?php

function mytheme_setup() {
	
	//ブロックエディター用ののCSSをフロント側に有効化
add_theme_support(  'wp-block-styles'  );
	
}
add_action(  'after_setup_theme',  'mytheme_setup'  ); 
```



### 補足情報（ツールのバージョン）
WordPress5.8

wp-block-stylesでTheme.min.jsを読み込むことができないです。

Wordpress投稿記事に挿入した引用記事に引用符のアイコンが表示されません。


下記イメージのように引用記事に引用符のアイコンを表示させたいのですが上手くいきません。
![イメージ説明](e5c7a2d0db072caa79151d3696b25cab.png)

wordpress 投稿記事に引用ブロックを作成し記事を記入して
![イメージ説明](a577994b01945b91576976c4d84c2159.png)

投稿記事をプレビューすると
![イメージ説明](a9a19cffca55d360eea7e68fab572f49.png)

となっており引用符のアイコンが表示されません。

引用記事に引用符アイコンを表示させるにはどうすればいいのでしょうか?

Wordpress投稿記事に挿入した引用記事に引用符のアイコンが表示されません。

### 前提・実現したいこと

自作のテーマを作成し、VScodeでテンプレートファイルを編集しながら構築していました。
途中、「MW WP Form」を使ってお問い合わせフォームを作っていたのですが、出来上がったショートコードをエディタ(Gutenberg)に張り付けても、一向に反映されません。
シンプルな文字を入力しても、HTMLで入力しても反映されませんでした。

調べても同じような状況の質問が見当たらず、途方にくれております。



### 試したこと

テーマを既存の「twenty twenty」に変更したところ、普通に反映されました。
自作テーマにおけるfunctions.phpの記述内容が足りないか、間違っているような気がするので記載しておきます。
```ここに言語を入力
<?php
/* CSSとJSの読み込み */
function my_scripts() {
  wp_enqueue_style('style-name', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all');
  wp_enqueue_script('script-name', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true);
}


/**
 * WordPress標準機能
 *
 * @codex https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support
 */
function my_setup() {
	add_theme_support( 'post-thumbnails' ); 
	add_theme_support( 'automatic-feed-links' ); 
	add_theme_support( 'title-tag' ); 
	add_theme_support( 'html5', array( 
		'search-form',
		'comment-form',
		'comment-list',
		'gallery',
		'caption',
	) );
}
add_action( 'after_setup_theme', 'my_setup' );



/* 投稿の表示件数 */
function news_posts_per_page($query){
    if (is_admin() || !$query->is_main_query()) {
        return;
    }
    if ($query->is_front_page()) {
        $query->set('posts_per_page', '3');
    }
}
add_action('pre_get_posts', 'news_posts_per_page');

```

style.cssにはテーマネームのみ記載してあります。
```ここに言語を入力
@charset "UTF-8";
/*
Theme Name: Engress
*/
```



Gutenberg(エディタ)