标签: wordpress-gutenberg

获取 InnerBlocks 的属性并将其保存到父级

我创建了一个“选项卡式面板”(选项卡式内容)块,它本质上只是一个仅允许“面板”块的 InnerBlocks 组件。创建面板时,必须为面板指定一个标题,然后在面板和选项卡按钮中使用该标题。因此,在选项卡式面板的渲染函数中,我需要从子面板块中提取标题。

我可以使用几种方法,例如在 tabbed-panels-render.php 函数中使用正则表达式来搜索子 html 中的正确属性,但这似乎不是最好的方法。

我认为最简单的解决方案是监听面板块的任何更改并将更改(在本例中为标题和 id)保存到父级。我当前的方法基于此讨论,它使用钩子来监听更改。该部分似乎工作正常,但我需要将输出保存在某处,因此我将它们保存为选项卡式面板块的属性。起初这似乎工作正常,但将“setAttributes”方法直接放在编辑功能中会导致问题。如果页面上有太多选项卡式面板块,则 React 会抛出“渲染过多”错误。

我的“setAttributes”函数应该放在哪里,或者是否有更好的方法将数据从子级传递到父级?我考虑过在子进程中使用 useDispatch 钩子,但是我需要检查很多事件(标题更改、块重新排序、块被删除等)

这里是相关的js和php文件。有一些自定义元素,但您应该能够解析它。

选项卡式面板.js

import { arraysMatch } from 'Components/utils.js'
const { InnerBlocks } = wp.blockEditor
const { createBlock } = wp.blocks
const { Button } = wp.components
const { useDispatch, useSelect } = wp.data
const { __ } = wp.i18n

export const tabbedPanels = {
  name: 'my/tabbed-panels',
  args: {
    title: __('Tabbed Panels', '_ws'),
    description: __('Tabbable panels of content.', '_ws'),
    icon: 'table-row-after',
    category: …
Run Code Online (Sandbox Code Playgroud)

wordpress reactjs wordpress-gutenberg gutenberg-blocks

6
推荐指数
1
解决办法
4721
查看次数

在 savePost 运行之前更新古腾堡块内容

我正在构建一个古腾堡块,在保存/发布帖子时,我需要首先使用 API 保存一些块数据,然后使用 API 返回的 ID 更新块属性,最后将帖子保存在 Wordpress 中。

目前我正在使用下面的黑客来接管“发布”按钮,但我想要一个更好的解决方案。

setTimeout(function () {
    jQuery(".editor-post-publish-button").click(function (event) {
        // Send some requests to an API which returns an ID

        // Update the post with new values

        dispatch('core/block-editor').updateBlockAttributes(clientId, data);

        // Finally save the Post
        dispatch('core/editor').savePost();
        })
    });
}, 3000);
Run Code Online (Sandbox Code Playgroud)

在此解决方案之前,我尝试使用 subscribe() 并检查 isSavingPost 等事件,但没有成功。在此先感谢您的帮助!

javascript wordpress-gutenberg

6
推荐指数
0
解决办法
914
查看次数

WordPress Gutenberg块:如何限制页面级块,但允许所有子级块

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

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

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

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

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

wordpress wordpress-gutenberg

5
推荐指数
1
解决办法
112
查看次数

如何访问古腾堡块中的高级自定义字段值?

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

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

    'show_in_rest' => true,
    'supports' => array( 'title', 'editor', 'custom-fields' ),
Run Code Online (Sandbox Code Playgroud)

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

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>;
  }),
});
Run Code Online (Sandbox Code Playgroud)

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

wordpress advanced-custom-fields wordpress-gutenberg gutenberg-blocks

5
推荐指数
1
解决办法
4382
查看次数

无需 the_content() 即可获取古腾堡块

我正在尝试在另一个帖子 ID 中显示来自特定帖子 ID 的古腾堡块。

问题是,是否存在一种功能,我可以从一篇文章中获取所有块并将其显示在网站的任何位置?就像 get_the_content 一样吗?

php wordpress wordpress-gutenberg gutenberg-blocks

5
推荐指数
1
解决办法
4481
查看次数

如何在古腾堡中使用序列化数据?

我正在尝试创建一个侧边栏插件,用于存储要在前端使用的帖子元。在不涉及不必要的细节的情况下,我需要将所有数据存储为 1 个元条目,而不是每个帖子的许多行。这是我到目前为止所拥有的:

// ds-jars.js

const pluginContent = (props) => {

    const productData = () => {
        const categoryId = createElement( PanelRow, null, 
            createElement(TextControl, {
                label: "Category Name",
                value: props.category_id,
                onChange: (content) => {
                    props.set_category_id(content)
                },
            })
        )
        const serialId = createElement( PanelRow, null, 
            createElement( TextControl, {
                label: "Serial Number",
                value: props.serial_id,
                onChange: (content) => { 
                    props.set_serial_id(content)
                }
            })
        )
        const productId = createElement( PanelRow, null, 
            createElement( TextControl, {
                label: "Product ID",
                value: props.product_id,
                onChange: (content) => { …
Run Code Online (Sandbox Code Playgroud)

javascript wordpress serialization wordpress-rest-api wordpress-gutenberg

5
推荐指数
1
解决办法
483
查看次数

如何在 registerBlockType 上的编辑和保存函数中获取块唯一 ID

我正在尝试将唯一的 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 })
            }
Run Code Online (Sandbox Code Playgroud)

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

谢谢你的帮助。

wordpress block reactjs wordpress-gutenberg

5
推荐指数
1
解决办法
7810
查看次数

WordPress &gt; 古腾堡 &gt; 如何将 Popover 添加到自定义格式类型?

我想扩展 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__ ) );
});
Run Code Online (Sandbox Code Playgroud)

kf-自定义脚本.js

(function(wp){

    console.log(wp);

    // Create Popover
    const { Popover } = wp.components; …
Run Code Online (Sandbox Code Playgroud)

javascript wordpress reactjs wordpress-gutenberg

5
推荐指数
0
解决办法
1357
查看次数

当使用 AJAX 请求获取内容时,古腾堡块的内联样式不会呈现

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

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

.wp-container-5 {
  display: flex;
  gap: 2em;
  flex-wrap: nowrap;
  align-items: center;
}
Run Code Online (Sandbox Code Playgroud)

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

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

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

css ajax wordpress block wordpress-gutenberg

5
推荐指数
1
解决办法
1903
查看次数

在古腾堡编辑器中获取“块“我的插件/块名称”已注册”

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

这是错误:

'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.
    */ …
Run Code Online (Sandbox Code Playgroud)

php wordpress wordpress-theming reactjs wordpress-gutenberg

5
推荐指数
1
解决办法
573
查看次数