古腾堡编辑器块的宽度和高度

Question

我正在编写一个古腾堡编辑器块插件，我需要古腾堡编辑器的宽度和高度（仅编辑器部分），以便在用户要求时使块具有完整的宽度和高度。

我开始为其编写 javascript，我可以使用类 edit-post-layout__content 从元素中获取宽度和高度。但这取决于其他元素，例如侧边栏的打开和关闭。

我发现一些 CSS 代码可以使块全宽，但它们实际上是 100vw，其中有 calc，并且使用时，块位于侧边栏（左和右）下方。

是否有一个钩子或某些函数可以用来获取古腾堡块的渲染函数内元素的宽度和高度？

谢谢你，

Answer 1

我只是基于课程

wp-block-post-content

。我所做的是创建一个接受样式的 JavaScript 函数，并将任何“vw”测量值转换为“px”：

function viewport_units_conversion( value ) {
    // Calculate vw into pixels
    var builder_width = document.getElementsByClassName("wp-block-post-content")[0].clientWidth;
    var regex = /([\d\.]+)vw/g;
    value = value.replace( regex, function(match, number) {
        return ( builder_width / 100 * number ) + "px";
    });
    return value;
}

您可以调整它以接受“vh”并从

clientHeight

计算出来，但是由于高度并不比视口高度本身小很多，所以我们没有理会它。

如果您折叠任何侧边栏或调整窗口大小，则可能需要重新计算这些值，但当您只需单击包含这些值的任何元素时，就会发生这种情况。

我不知道有任何钩子可以为你做到这一点，但如果有的话，那么这很可能是一个更好的方法。