О проблеме, когда supportsLayout устанавливается в true при добавлении theme.json в тему WordPress.

Однажды меня попросили сделать что-нибудь с тем, что я не мог выбрать full width или wide во внутреннем блоке при вставке theme.json, поэтому я провел небольшое исследование theme.json.
Вот заметка об этом.

Заключение

Я обнаружил, что могу установить full width и wide во внутреннем блоке, даже если в теме используется theme.json.

add_filter( 'block_editor_settings_all',
 function ( $editor_settings ) {
 $editor_settings['supportsLayout'] = false;
 return $editor_settings;
 }
);
Вход в полноэкранный режим Выход из полноэкранного режима

Код ядра

Функция, определяющая наличие theme.json
 https://github.com/WordPress/wordpress-develop/blob/ed1f411c564f79d003de8babb485884d0a71caa2/src/wp-includes/class-wp-theme-json-resolver.php#L398-L415

Переменная $editor_settings, устанавливающая supportsLayout
 https://github.com/WordPress/wordpress-develop/blob/ed1f411c564f79d003de8babb485884d0a71caa2/src/wp-admin/edit-form-blocks.php#L201
Наконец, $editor_settings преобразуется в json и считывается скриптом wp_add_inline_script
 https://github.com/WordPress/wordpress-develop/blob/ed1f411c564f79d003de8babb485884d0a71caa2/src/wp-admin/edit-form-blocks.php#L277-L296
В функции get_block_editor_settings перед форматированием $editor_settings есть хук фильтра.
 https://github.com/WordPress/wordpress-develop/blob/ed1f411c564f79d003de8babb485884d0a71caa2/src/wp-includes/block-editor.php#L300-L423
Основная идея Полная ширина ≠ ширина экрана
В случае Full width, max-width — none.
Полная ширина означает не всю ширину браузера, а ширину родительского элемента. 

Основные проблемы.

WordPress/gutenberg#29335
WordPress/gutenberg#33374
 
Возможно, проблема в том, что разница между редактором Gutenberg и внешним DOM не является WYSWYG (= вы получаете то, что видите).
 
Если я помещаю в theme.json, div не оборачивается на экране редактирования, потому что он соответствует критерию themeSupportsLayout.
 https://github.com/WordPress/gutenberg/blob/e12ac149a1ec47518b011dd5d6d26e224429b1cb/packages/block-editor/src/components/block-list/block.js#L131-L153
https://github.com/WordPress/gutenberg/pull/38613
Также есть вопросы, как это сделать, когда я добавляю настройки левого и правого поля.
Поэтому я отключаю настройку ширины.
*** Также, если вам нужна полная ширина внутри блока обложки, вы можете использовать полную ширину, группируя внутренние блоки ***.
Я не знаю, почему нельзя использовать ширину.
Другие полезные советы
Следующие статьи также были полезны в отношении ширины
https://snow-monkey.2inc.org/2020/01/06/snow-monkey-v9/#co-index-6
https://wordpress.tv/2019/12/21/toru-miki-things-to-be-learn-for-theme-developers/
https://speakerdeck.com/waviaei/gutenberg-yi-jiang-falsetemazuo-cheng-nixiang-kete-jin-xue-bubekikoto?slide=71
Есть комментарий hamano в репозитории SWELL
https://github.com/loos/SWELL/issues/239#issuecomment-1128692201
Мне удалось это сделать, хотя и принудительно, с помощью js в supportsLayout:false, написав это так.
Однако, когда появляется экран редактирования, невозможно указать полную ширину или широкую, а вставка какого-то блока позволила бы мне задать ширину.
 
Лично я на данный момент (2022/5/30) считаю, что помещать theme.json в классическую тему — это бабский взлом.

Оцените статью
Procodings.ru
Добавить комментарий