标签: wordpress-gutenberg

添加块后如何立即运行脚本？我使用 ServerSideRender 添加地图块，但它只打印带有地图 id 地图画布的 div。我要申请

var map = new google.maps.Map(document.getElementById('map-canvas')

添加地图块后如何应用它？

我正在创建非常简单的文本块。当我第一次添加时，该块工作正常。如果刷新页面并尝试编辑该块，则会显示消息“此块包含意外内容或无效内容”。我试图禁用htmlvalidation检查，但这无济于事。另外，在我单击“确定”之后：当前块和转换块之后包含相同的代码。

http://prntscr.com/lwv18b
http://prntscr.com/lwv1e1

这是我的index.js文件代码

<pre>
/**
 * Block dependencies
 */
import icon from './icon';
import './style.css';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;




/**
 * Register block
 */
export default registerBlockType(
    'jsforwpblocks/richtext',
    {
        title: __('Bizbike Small Description', 'jsforwpblocks'),
        description: __('Default title', 'jsforwpblocks'),
        category: 'common',
        icon: 'text',
        keywords: [
            __('Text', 'jsforwpblocks'),
            __('Call to Action', 'jsforwpblocks'),
            __('Message', 'jsforwpblocks'),
        ],
        attributes: {
            message: {
                type: 'array', …

在一个WordPress插件中，我创建了一些自定义的“布局” Gutenberg块。这些基本上是包含其余页面内容的“框”。我想用户限制为只添加这些箱子到一个网页，但随后让他们把任何内他们的孩子块。

我发现了如何使用allowed_block_types过滤器来限制古腾堡块。这仅用于限制用户向页面添加“框”。

然后，我发现了如何将古腾堡块限制为仅允许特定的子块。即在InnerBlocks上指定，allowedBlocks: ['core/paragraph','core/list','core/seperator',...]以便“框”可以包含这些子块。

问题在于，allowed_block_type过滤器似乎覆盖了allowedBlocks。

如何在“页面”级别允许特定的块，而在“孩子”级别允许其他块？

我有一个带有一些高级自定义字段的自定义帖子类型。我正在尝试从古腾堡块内访问这些自定义字段值。

我已将以下内容添加到我的register_post_type函数中

    'show_in_rest' => true,
    'supports' => array( 'title', 'editor', 'custom-fields' ),

我可以使用以下命令成功地从我的古腾堡块中检索自定义帖子：

select('core').getEntityRecords('postType', 'customType')

但我没有看到自定义字段或其值。

这是我的块的 JavaScript：

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { withSelect } = wp.data;

registerBlockType('cgb/block-press-block', {
  title: __('Press Block'),
  icon: 'awards',
  category: 'common',
  keywords: [
    __('press-block'),
  ],
  edit: withSelect((select) => {
    return {
      posts: select('core').getEntityRecords('postType', 'press')
    };
  })(({posts}) => {
    return <p>Content</p>;
  }),
});

有没有办法在编辑器端访问自定义帖子的高级字段值或将该数据传递到块？

我正在尝试将唯一的 ID 分配到我的 SVG LinearGradient 元素中，这是针对我正在工作的自定义古腾堡块，基本上我需要访问（或生成）一个唯一的 id，以便我可以将其放入元素 HTML id 中范围。

我知道我们有一个主块 ID，我们可以使用 CSS 进行样式设置并创建锚点，但这对我想要实现的目标没有帮助。

我发现了这个https://developer.wordpress.org/block-editor/packages/packages-compose/#withInstanceId但我不明白如何使用它，文档没有给我简单的例子。

请按照我的块代码的一部分（这不起作用）：

attributes: {
            id: {
                type: 'string',
                default: withInstanceId(function({instanceId}){ return instanceId })
            }

如您所见，我正在尝试将实例 ID 分配给属性，以便我可以使用 props.attributes.id 将其访问到 SAVE 和 EDIT 函数中

谢谢你的帮助。

我有 2 个来自我正在尝试构建的 Wordpress Gutenberg 自定义块的 SelectControl。我不使用ES6。只有 ES5，没有 JSX。2 SelectControl 应按以下方式工作：

他们从 REST WP Api 获取帖子类型和所有帖子。我想要实现的是，当我从 SelectControl 1 （帖子类型）中选择一个项目时，我会在 SelectControl 2 中获得相关的过滤帖子。所有帖子和帖子类型都在页面加载时预加载到数组中。我可以使用下面的代码使用 REST Api 成功填充两个控件，但是当根据第一个控件中的选定值过滤第二个选择控件时，它不起作用。没有错误。

onChange: function(value) {
    selectedType = value;
}

上面的代码没有排序任何效果。也没有错误。无法弄清楚这里出了什么问题

(function(wp) {
var registerBlockType = wp.blocks.registerBlockType;
var InspectorControls = wp.blockEditor.InspectorControls;
var PanelBody = wp.components.PanelBody;
var TextControl = wp.components.TextControl;
var ColorPalette = wp.components.ColorPalette;
var SelectControl = wp.components.SelectControl;
var Dashicon = wp.components.Dashicon;
var el = wp.element.createElement;
var withState = wp.compose.withState;
var __ = wp.i18n.__;

var options = [{
    value: …

我正在开发一个 WordPress 插件，我想将按钮添加到 gutenberg 编辑器的标题中，就像 Elementor 插件“使用 Elementor 编辑”添加的按钮一样

谁能指导我该怎么做才能实现这一目标......提前致谢

我想扩展 WordPress (Gutenberg) 默认块 段落，让编辑者无需编写代码即可添加工具提示。

目标：

• 添加块段落并添加一些文本
• 选择文本并单击（新）按钮（应出现在文本样式旁边）
• 工具提示按钮应该与链接按钮完全相同，只是应该可以输入文本而不是链接

在职的：

• 我添加了一个按钮（文本样式）
• 我可以选择文本并且可以添加类（.kf-tooltip）
• 我知道如何通过 JS 添加工具提示

丢失的：

• 如何添加 Popover 以输入工具提示文本
• 如何存储/保存这些数据
• 如何将此数据作为属性输出（例如：data-tooltip="Lorem ipsum"）

任何帮助都是极好的！

WordPress 插件

<?php
/*
Plugin Name: KF Custom
*/

add_action( 'enqueue_block_editor_assets', function () {
    wp_enqueue_script(
        'kf-custom-script',
        plugins_url( 'kf-custom-script.js', __FILE__ ),
        array('wp-blocks', 'wp-rich-text')
    );
});

add_action( 'enqueue_block_assets', function () {
    wp_enqueue_style( 'kf-custom-style', plugins_url( 'style.css', __FILE__ ) );
});

kf-自定义脚本.js

(function(wp){

    console.log(wp);

    // Create Popover
    const { Popover } = wp.components; …

我需要the_content()通过 AJAX 请求获取并在页面中呈现所有古腾堡块及其内联样式。

问题是，独特的块类被添加到主题模板的页脚中。

.wp-container-5 {
  display: flex;
  gap: 2em;
  flex-wrap: nowrap;
  align-items: center;
}

当get_the_content()通过 AJAX 请求使用时，不会呈现该独特的块样式。我猜这是因为内联块样式依赖于某种不会被 AJAX 请求触发的钩子。do_blocks()不渲染内联样式。

我搜索了数据库并搜索了 WordPress 源文件，但找不到类似的类.wp-container-5来自哪里。我想如果我能找到内联样式的位置，我可以简单地查询它并将其呈现在页面中。

有谁知道独特的块样式存储在哪里和/或如何查询它们并通过 AJAX 请求包含它们？

我正在尝试创建一个具有多个块和一个管理页面的插件。一切似乎都运转良好。管理页面正在显示，块也正在工作。但是当我进入古腾堡编辑器时，控制台中出现错误，这让我担心我所做的是否错误。

这是错误：

'Block "my-plugin/block-1" is already registered' 'Block "my-plugin/block-2" is already registered'

这是插件 php 文件：

class MY_PLUGIN{
    public function __construct() {
        add_action( 'admin_menu', [ $this, 'menu_item' ] );
        add_action( 'admin_enqueue_scripts', [ $this, 'load_custom_wp_admin_scripts' ] );
        add_action( 'init', [ $this, 'register_blocks' ] );
    }

    /**
    * Initialize the plugin
    */
    public static function init(){
        static $instance = false; 
        if( !$instance ) {
            $instance = new self();
        }
        return $instance;
    }

    /**
    * Create a new admin page for our app.
    */ …