.has-global-padding未添加到.is-root-container中

Question

我有一些问题。has-global-padding没有被添加到is-root-container。

的主题。我有以下设置:

"settings": {
"useRootPaddingAwareAlignments": true,
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
}
},
"styles": {
"spacing": {
"blockGap": "2rem",
"padding": {
"top": "1rem",
"right": "1rem",
"bottom": "1rem",
"left": "1rem"
}
}

即使已经定义了填充，has-global-padding类也不会添加到is-root-container中。

你知道我错过了什么吗?

谢谢,奥尔多

Answer 1

下面是我用来从.is-root-container中添加。has-global-padding和。is-layout-constrained(并删除。is-layout-flow)的代码:

/**
* Apply ugly hack to set correct root editor container classes
* 
* Setting settings.useRootPaddingAwareAlignments to true and settings.layout.type to
* "constrained" should result in these classes being added properly, but it does not.
* So, we add them manually. This allows front- and back-end layouts to match, since
* both containers are wrapped with the same classes.
* 
* @see https://stackoverflow.com/questions/75912533/has-global-padding-not-added-to-is-root-container-in-wordpress
*/
add_action('admin_footer-post.php', 'aquamin_root_editor_container_fix'); // Fired on post edit page
add_action('admin_footer-post-new.php', 'aquamin_root_editor_container_fix'); // Fired on add new post page
function aquamin_root_editor_container_fix() {
echo "<script>
window.addEventListener('load', function() {
var rootContainer = null;
var editorCanvas = document.querySelector('iframe[name="editor-canvas"]');
if (editorCanvas) {
rootContainer = editorCanvas.contentWindow.document.querySelector('.is-root-container');
} else {
rootContainer = document.querySelector('.is-root-container');
}
if (rootContainer) {
if (!rootContainer.classList.contains('has-global-padding')) {
rootContainer.classList.remove('is-layout-flow');
rootContainer.classList.add('has-global-padding');
rootContainer.classList.add('is-layout-constrained');
} else {
console.log('The theme is now adding .has-global-padding properly: you may remove this patch.');
}
}
});
</script>";
};

你可以把它添加到functions.php中。它工作得很好:现在块编辑器显示正确的左/右填充，并且.alignfull块在其中正确地使用负边距来达到全宽度。尽管如此，需要使用这样的hack还是很不幸的…

Answer 2

我相信这是因为Twenty Twenty- three使用HTML模板，而在single.html中它有:

<!-- wp:post-content {"layout":{"type":"constrained"}} /-->

使用主题样式">