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

Question

我对 .has-global-padding 未添加到 is-root-container 存在一些问题。

在 theme.json 中我有以下设置：

"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

我相信这是因为《二十二十三》使用了 HTML 模板，并且在

single.html

中它有：

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

在古腾堡中勾选“使用主题样式”时，将使用此模板。