full site editor theme
間違ったCSSクラスを防ぐために修正されました
CSSクラスのemulsion-has-sidebar、emulsion-header-has-titleをbody要素から削除します
Fixed to prevent the Theme wrong CSS class
remove CSS class emulsion-has-sidebar, emulsion-header-has-title from body element
FSE Transitional Theme
Fixed duplicate of the main element using filter
With this change, I changed to stop the gutenberg skip link script. The skip link used is that of the theme.
Cannot edit blocks
- panel block
- dropdown hover block
- dropdown click block
I noticed that the edit screen of the block editor is hidden
When I looked it up, an inline style of 16000line, which seems to have replaced the style of the theme, was added block editor screen.
Rule set described in the theme stylesheet
body:not(.block-editor-page) .wp-block-group.modal {
position: absolute;
padding: 0;
overflow: hidden;
color: var(--thm_general_text_color);
visibility: hidden;
background: var(--thm_background_color);
}
Rule set added in the editor
.editor-styles-wrapper:not(.block-editor-page) .wp-block-group.modal {
position: absolute;
padding: 0;
overflow: hidden;
color: var(--thm_general_text_color);
visibility: hidden;
background: var(--thm_background_color);
}
These looked like the plugin simply replaced the body element with editor-styles-wrapper.
In order to escape from this forced replacement and regain its original functionality, I decided to change the body element to the .emulsion class.
.emulsion:not(.block-editor-page) .wp-block-group.modal {
position: absolute;
padding: 0;
overflow: hidden;
color: var(--thm_general_text_color);
visibility: hidden;
background: var(--thm_background_color);
}
wp-block-embed
表示不良を修正
Fixed Due to the style of the theme, it could not be displayed on the front end
Gutenberg upload allowed file type
gutenberg には、本来許可されているはずのファイルがアップロードできないバグがあるようです。https://github.com/WordPress/gutenberg/issues/23510
windows 環境で長期的に発生している模様なので、暫定的にフィルターで、zipファイルと、htmlファイルのアップロードを許可しました。
There seems to be a bug in gutenberg where you can’t upload files that should have been allowed.https://github.com/WordPress/gutenberg/issues/23510
Since it seems to have occurred in the windows environment for a long time, I temporarily allowed uploading of zip files and html files with a filter.
Modified CSS block navigation
OUTPUT HTML CHANGES
from
<a class="wp-block-navigation-item__content" href="" title="">
<span class="wp-block-navigation-item__label">Blog</span>
<span class="wp-block-navigation__submenu-icon" tabindex="0">
<svg xmlns="" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false">
<path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path>
</svg>
</span>
</a>
to ( gutenberg 12.0.1 )
<a class="wp-block-navigation-item__content has-text" href="" data-no-instant="data-no-instant">gutenberg block file file type</a>
<button class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false" tabindex="0"><svg xmlns="" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false">
<path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path>
</svg>
</button>
Remove filter
add_filter( 'theme_templates', 'emulsion_load_block_page_templates_exclude', 21 );
add_filter( 'block_editor_settings_all', function ( $settings ) {
$settings['defaultBlockTemplate'] = file_get_contents( get_theme_file_path( 'block-templates/default.html' ) );
return $settings;
} );
removed template block-templates/default.html
// check
//$result .= remove_filter( 'block_editor_settings', 'gutenberg_experiments_editor_settings' ) ? '' : ' gutenberg_experiments_editor_settings';
//todo
//$result .= remove_filter( 'block_editor_settings_all', 'gutenberg_experiments_editor_settings' ) ? '' : ' gutenberg_experiments_editor_settings';
known issues
If Classic Theme is selected
(Customizer/ Theme Operation Mode Setting / Classic Theme)
all template parts, all templates link can not access template page
alert message ‘Sorry, you are not allowed to access this page.’
but You can edit the template of posts editor
//remove_action( 'admin_menu', 'gutenberg_site_editor_menu', 9 );
モーダルブロックパターン
投稿編集画面で、モーダルボックスのコンテンツ編集が非表示となったことに気付く
原因は、フロントエンドのスタイルが、エディタにも反映し、非表示となっていたことにある。
.editor-styles-wrapper:not(.block-editor-page) .wp-block-group.modal {
position: absolute;
padding: 0;
overflow: hidden;
color: var(--thm_general_text_color);
visibility: hidden;
background: var(--thm_background_color);
}
#wpbody-content .editor-styles-wrapper:not(.block-editor-page) .wp-block-group.modal {
position: relative;
padding: 0;
overflow: hidden;
visibility: visible;
}
editor-style を移譲の用に上書きした。しかし、なぜ?
原因を調べる
.editor-styles-wrapper:not(.block-editor-page) .wp-block-group.modal {
position: absolute;
padding: 0;
overflow: hidden;
color: var(--thm_general_text_color);
visibility: hidden;
background: var(--thm_background_color);
}
コアが、body要素を.editor-styles-wrapper上書きして、エディタ用スタイルを作成している模様
地雷が見つかりました。
body:not(.block-editor-page){
...
}
このようなスタイル指定は使用しないのが賢明
.some-class:not(.block-editor-page){
...
}
このような表現を行えば、editor styleに影響はなく、editor style側で上書きする必要はなさそうです。
gutenberg 12.0.1
<li class=" wp-block-navigation-item has-child open-on-hover-click wp-block-navigation-submenu">
<a class="wp-block-navigation-item__content has-text" href="" data-no-instant="data-no-instant">gutenberg block file file type</a>
<button class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false" tabindex="0"><svg xmlns="" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false">
<path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path>
</svg>
</button>
<ul class="wp-block-navigation__submenu-container">
<li class=" wp-block-navigation-item current-menu-item wp-block-navigation-link">
<a class="wp-block-navigation-item__content" href="" aria-current="page" data-no-instant="data-no-instant">
<span class="wp-block-navigation-item__label">test</span>
</a>
</li>
</ul>
</li>
<li class=" wp-block-navigation-item has-child menu-item menu-item-type-post_type menu-item-object-page wp-block-navigation-link">
<a class="wp-block-navigation-item__content" href="" title="">
<span class="wp-block-navigation-item__label">Blog</span>
<span class="wp-block-navigation__submenu-icon" tabindex="0">
<svg xmlns="" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false">
<path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path>
</svg>
</span>
</a>
<ul class="wp-block-navigation__submenu-container">
<li class=" wp-block-navigation-item has-child menu-item menu-item-type-post_type menu-item-object-page wp-block-navigation-link">
<a class="wp-block-navigation-item__content" href="" title="">
<span class="wp-block-navigation-item__label">Front Page</span><span class="wp-block-navigation__submenu-icon" tabindex="0">
<svg xmlns="" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false">
<path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path>
</svg>
</span>
</a>
<ul class="wp-block-navigation__submenu-container">
<li class=" wp-block-navigation-item menu-item menu-item-type-post_type menu-item-object-page wp-block-navigation-link">
<a class="wp-block-navigation-item__content" href="" title="">
<span class="wp-block-navigation-item__label">full post</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
old
style 要素の 15000行目に、以下のスタイルが見つかった
個別投稿の、クエリーブロック、投稿画像ありの場合のレイアウトの調整
いってもしょうがない。