我有几个用 Node.js 编写的机器人，用于自动生成 HTML 内容并使用 REST API 将它们放入多个 Wordpress 站点。近日，Wordpress 5.0 正式发布，Gutenberg 成为默认编辑器。所有旧帖子，以及机器人生成的帖子，都将封装在一个“经典”块中。

正如我们大多数人已经知道的那样，应该添加额外的标记来将 HTML 元素转换为块，并且在 Gutenberg UI 中有一个“转换为块”按钮可以将它们转换为块。有没有什么方便的方法（比如使用内置函数）以编程方式做与“转换为块”相同的事情，或者我们应该一个一个地包装那些与古腾堡相关的标记？任何帮助都应该受到赞赏

对于我的生活，我找不到任何关于如何执行此操作的信息：只需在主题模板中通过 php 输出可重用的古腾堡块。好像应该是可行的。任何人？

我创建了一个 Wordpress 主题，现在正在为块编辑器开发编辑器样式表，以更好地反映编辑器中主题的外观。为此，我需要能够处理其中不同的帖子类型。

对于前端，有一个body_class()在模板中使用的函数，该函数插入一个类，该类标识帖子类型，并且可以在组合选择器中使用，以仅在特定帖子类型中处理某些元素。

现在，post-type 类位于页面的 body 标签中，也处于编辑模式，但显然编辑器样式表 CSS 以一种“隔离”的方式应用 - 包含 body 标签中的类的组合选择器在编辑器中不起作用。

因此，我正在寻找类似的东西，可以在块编辑器中使用，这样我就可以在组合选择器中使用它，这些选择器仅适用于特定帖子类型中的某些元素。

有什么想法如何做到这一点吗？

顺便说一句，我还尝试使用 Javascript/jQuery 检查帖子类型：

wp.domReady(function() {
        var postType = jQuery('form.metabox-base-form input#post_type').attr('value');
        if(postType == 'post'){
            alert("It's a post!");//in real life some other action...
        }
});

但是，尽管至少触发我放在那里的警报是合乎逻辑的，但当我加载帖子的编辑页面时，没有任何反应，其中包括其“帖子”值的输入元素清楚地存在。（？）

添加：尝试我能想到的一切来找到解决方法，我还尝试了这个脚本来看看当我使用编辑器时是否可以检查主体类：

jQuery(document).ready(function() {
    if(jQuery('body').hasClass('post-type-page')) {
        alert("It's a page!");
    } else {
        alert("It's not a page");
    }
});

编辑器页面（即显示 WP 块编辑器的网页）上的结果：根本没有警报！为什么？？？块编辑器 Javascript 是否会阻止/阻止所有其他 Javascript？

PS：我之前在StackExchange WordPress开发上发布了这个问题的第一部分，但没有得到任何反应，所以我在这里尝试一下......

古登堡的API是安静的模糊,我想不出如何创建和块附加到一个职位.

我发现wp.blocks.createBlock('core/paragraph', {content: "blabla"});它返回一个漂亮的块对象,但不会将任何内容附加到帖子中.

我想通过单击按钮插入一个包含一些自定义内容的简单段落.

我遵循了有关如何构建自定义 WordPress Gutenberg 块的教程：https : //neliosoftware.com/blog/how-to-create-your-first-block-for-gutenberg/

第一个块很好，但我想在这个块中使用自定义图像大小。这个图像大小也应该是响应式的，这意味着应该在前端添加其他图像大小的 srcset 属性。

我在互联网上搜索了很长时间，但没有找到任何东西。使用来自 wordpress 的标准图像块或画廊块调整大小的图像，但对我来说，整个代码太复杂了，因为我还不习惯古腾堡的编码方式......

是否有关于如何存档的现有指南或代码示例？

最好的卢卡斯

我正在开发一个捆绑多个自定义古腾堡块的插件，我正在使用 @wordpress/scripts npm 模块来构建 webpack。到目前为止效果很好，但是在编辑器中工作时检查控制台会给我关于块已经注册的错误。目前我有 5 个块和 4 个错误，所以我假设在我的插件 PHP 中的每个注册函数调用中，所有块都尝试再次注册。每个块都有自己的 src-js 文件，并且都捆绑到一个 build-js 中。此外，每个块在 PHP 中都有自己的带有 add_action 的 register 函数，但是 plugins_url 始终是相同的 build-js。我相信这是我的 PHP 文件如何处理注册的问题，但老实说，我一直在解决这个问题。我仍在努力应对块带来的所有变化。

包含 2 个块的示例 PHP 代码

<?php
/*
Plugin Name: My Blocks Plugin
*/

/* Block 1 */

function register_my_block_1() {
    wp_register_script(
        'foo-my-block-1',
        plugins_url( 'build/index.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' )
    );

    register_block_type( 'foo/my-block-1', array(
        'editor_script' => 'foo-my-block-1',
    ) );

}
add_action( 'init', 'register_my_block_1' );

/* Block 2 */

function register_my_block_2() {
    wp_register_script(
        'foo-my-block-2', …

我一直致力于创建自己的自定义古腾堡中继器块，其中包含文本和链接输入字段。我只见过这样的ES5示例。我已经花了近 8 个小时来创建这些示例的我自己的版本，但我陷入了困境。

我来这里是因为我希望有人指出正确的方向（非常需要帮助）。

这是我目前拥有的代码。我不知道从哪里开始 ES5 -> ESNEXT 转换。

编辑：我忘了说我正在尝试避免使用 ACF

// Importing code libraries for this block\nimport { __ } from \'@wordpress/i18n\';\nimport { registerBlockType } from \'@wordpress/blocks\';\nimport { RichText, MediaUpload, InspectorControls } from \'@wordpress/block-editor\';\nimport { Button, ColorPicker, ColorPalette, Panel, PanelBody, PanelRow } from \'@wordpress/components\';\n\nregisterBlockType(\'ccm-block/banner-block\', {\n    title: __(\'Banner Block\'),\n    icon: \'format-image\', // from Dashicons \xe2\x86\x92 https://developer.wordpress.org/resource/dashicons/.\n    category: \'layout\', // E.g. common, formatting, layout widgets, embed.\n    keywords: [\n        __(\'Banner Block\'),\n        __(\'CCM Blocks\'),\n    ],\n …

这是我第一次使用新的 WooCommerce Blocks。在我网站的主页上，我添加了“ProductBestSellers”块和“ProductOnSale”块。这两个块都显示了最畅销产品或特价产品的网格样式布局。

对于我需要的设计，我必须向 html 添加一些包装器，因此我从这里克隆了存储库；WooCommerce 古腾堡块

添加的 html 确实有效，但现在我需要在这些块中包含产品简短描述。我编辑了 AbstractProductGrid.php，如下所示；

AbstractProductGrid.php

/**
 * Render a single products.
 * Edited: 24/02/2020 
 *
 * Added wrappers to display content with padding borders and other styling
 *
 * @param int $id Product ID.
 * @return string Rendered product output.
 */
public function render_product( $id ) {
    $product = wc_get_product( $id );

    if ( ! $product ) {
        return '';
    }

    $data = (object) array(
        'permalink'     => esc_url( $product->get_permalink() ),
        'description'   => …

使用 Wordpress 自定义块，我目前正在尝试创建一个包含按钮和隐藏内容的弹出框组件。当用户单击或将鼠标悬停在按钮上（在网站的前端，而不是在块编辑器中）时，应显示隐藏内容。

但是，当我向按钮添加onClick或 时onHover，事件处理程序不会执行。

此外，尝试使用useState挂钩来存储弹出窗口的显示状态会导致我的块编辑器崩溃。

这就是我的save方法代码目前的样子：

export default function save() {

    const [shouldDisplay, setShouldDisplay] = useState(false);

    const handleClick = () => {
        console.log('Click confirmed.');
        setShouldDisplay(!shouldDisplay);
    }

    return (
        <div {...useBlockProps.save()}>
            {/* Button with onClick handler */}
            <button onClick={() => handleClick()}>Show hidden content!</button>

            {/* Hidden content */}
            { shouldDisplay && <div class="popover-content">...</div> }
        </div>
    )
}

这个类似（？）问题的答案似乎表明这是不可能的，因为前端只是渲染“静态html”并剥离了javascript。如果是这种情况，在 WordPress 自定义块的前端创建用户交互性（悬停/单击事件甚至可能的 http 请求）的好方法是什么？

我正在使用 Gutenberg 的 withSelect 包来尝试获取属于该站点的所有帖子类型。这是我的代码：

export default withSelect( select => {
    // shorthand
    const { getEntityRecords } = select( 'core' );

    return {
        typesList: getEntityRecords( 'types', '' ),
    };
} )( SearchEdit );

但我没有得到任何回报。我还发现 withSelect 的文档非常稀疏，所以如果有人有任何进一步的信息会很好，我会尝试更新文档。