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

v440hwme  于 9个月前  发布在  WordPress
关注(0)|答案(2)|浏览(134)

.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"
      }
    }

字符串
即使定义了padding,has-global-padding类也不会添加到is-root-container中。
知道我错过了什么吗
谢谢,奥尔多

8ftvxx2r

8ftvxx2r1#

下面是我用来从.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中。它工作得很好:现在块编辑器显示正确的左/右填充,并且其中的. dummy块正确地使用负边距来实现全宽度。仍然,需要使用这样的技巧是不幸的.

mqkwyuun

mqkwyuun2#

我相信这是因为Twenty Twenty Three使用HTML模板,在single.html中它有:

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

字符串
当在 gutenberg 中选中“使用主题样式”时,将使用此模板。

相关问题