标签: gutenberg-blocks

我使用 @wordpress/create-block 创建了一个自定义块插件（https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/）

它作为一个插件工作，但是当我将它移动到主题中时，block.json 文件中的“editorScript”返回错误的路径。

themeDirectory/blocks/mycustomblock/block.json\n\n{\n    "name": "create-block/mycustomblock",\n    "title": "Mycustomblock",\n    "description": "Example block written with ESNext standard and JSX support \xe2\x80\x93 build step required.",\n    "category": "text",\n    "icon": "smiley",\n    "supports": {\n        "html": false\n    },\n    "attributes":{\n        "backgroundColor": {\n            "type": "string",\n            "default": "red"\n        }\n    },\n    "editorScript": "file:./build/index.js"\n}\n

从 editorScript 返回的路径：

404 | http://localhost:8888/wordpress-test/wp-content/plugins/Users/jonrose/Dropbox/htdocs/wordpress-test/wp-content/themes/mytheme/blocks/mycustomblock/build/index.js?ver=4f45658ee3212a45c5d5367f6fbdfeba\n

如果我在 register_block_type 函数中注册脚本，它可以正常工作

wp_register_script( \'mycustomblock-js\', get_template_directory_uri() . \'/blocks/mycustomblock/build/index.js\', array( \'wp-blocks\' ));\n\n    register_block_type( __DIR__, array(\n        \'editor_script\' => \'mycustomblock-js\'\n    ) );\n

如何在wordpress gutenberg编辑器中将新插入的块滚动到视图中？

我正在创建块

const nextBlock = createBlock( 'core/paragraph' );
wp.data.dispatch( 'core/editor' ).insertBlock( nextBlock );
//scroll the block into the view

我还看到古登堡（Gutenberg）dom-scroll-into-view像在这里那样使用软件包。

他们的文件说：

var scrollIntoView = require('dom-scroll-into-view');
scrollIntoView(source,container,config);

但是如何使它在我的情况下起作用，如何获取源和容器DOM元素？

基本上我想开发一个wordpress块主题。为了方便自定义，我想在我的主题中添加一些自定义块。但我不想为此创建一个插件。自定义块将在我的主题内。当有人安装我的主题他将获得那些内置于我的主题中的自定义块。我怎样才能实现它以及如何组织我的文件夹结构？

我一直在到处寻找以找出如何在古腾堡块内添加事件。我正在努力使用 ACF 和 Foundation 添加手风琴系统。我使用 ACF 创建了一个块、字段和模板。我希望我的用户能够在视觉模式下打开和关闭手风琴。

我确实找到了以下脚本来监视块何时更改。唯一的问题是它在加载所有内容之前触发，我必须使用超时来允许块完全加载。我一直无法找到更好的方法来实现这一目标。有什么建议么？

const getBlockList = () => wp.data.select( 'core/editor' ).getBlocks();
let blockList = getBlockList();
wp.data.subscribe(() => {
    const newBlockList = getBlockList();
    const blockListChanged = newBlockList !== blockList;
    blockList = newBlockList;
    if ( blockListChanged ) {
        setTimeout(function(){
            jQuery(document).foundation();
            Foundation.reInit($('[data-accordion]'));
        }, 4000);
    }
});

我正在使用 ACF 块并有以下块。

acf_register_block_type(array(
    'name'              => 'columns',
    'title'             => __('Columns'),
    'description'       => __('For complex multi colomn rows.'),
    // 'category'          => 'formatting',
    'render_template'   => get_template_directory() . '/includes/blocks/templates/columns.php',
    'enqueue_style'     => get_template_directory_uri() . '/includes/blocks/css/columns.css',
    'enqueue_script'    => get_template_directory_uri() . '/includes/blocks/js/columns.js',
    'keywords' => array('rows', 'content', 'column'),
    'supports' => array('align' => array('wide', 'full')),
    'mode' => 'auto',
));

当我单击编辑器中的块以打开它进行编辑时，我需要运行一些 JS。我不知道是否有执行此操作的标准方法，所以我想我可以使用单击事件来运行我的函数，但它不会触发。这是 DOM 中块的图片。

阻止 HTML

我按照此处的文档添加了脚本。（底部有一个“添加块脚本”示例）

这是我精简后的 JS...

(function($){
    var initializeBlock = function ($block) {

        $('body').on('click', 'div[data-type="acf/columns"]', function () {
            console.log('teeeeeeeest');
        });

        //... Other JS put here …

我正在尝试使自定义列阻止，因为gutenberg使用的wordpress默认不是我所需要的。

因此，我查看了它的工作方式，它使用带有布局定义的InnerBlocks块，但是无法为列指定html标签和类，因此对我来说毫无用处。

然后，我决定使用map循环出列，效果很好，然后我在每列内部添加了InnerBlocks组件，以允许向该列插入其他块，但是问题是在每列中InnerBlocks的内容是共享的，所以我试图将每个InnerBlock和column的键属性设置为唯一，并且它们的内容仍然共享（不，我不使用共享块）。

好像gutenberg在每一列中都使用了相同的InnerBlocks实例。

我正在尝试构建一个块类型，您可以在其中动态添加列，并在每列中添加带有一些信息的“卡片”。

为了让我知道我在做什么，这是edit函数的返回：

<section className="infonav">
            <div className="infonav__container">
                <div>
                    <button onClick={onAddBox}>{__('Add column', 'zmg-blocks')}</button>
                </div>
                <div className="infonav__row">
                    {[...new Array(columns).keys()].map((item, index) => {
                        return (
                                <div className="infonav__row__col" key={"info_cols"+index}>
                                    <div>
                                        <button onClick={onRemoveBox.bind(index)}>
                                            {__('Remove', 'zmg-blocks')}
                                        </button>
                                    </div>
                                    <InnerBlocks key={"info_boxes"+index}/>
                                </div>
                        );
                    })}
                </div>
            </div>
        </section>

谢谢

我正在尝试使用“getEntityRecords”从特定的分类术语中获取自定义帖子类型。对于“post”，我可以在“query”对象中使用“categories”属性，如下所示：

getEntityRecords( 'postType', 'post', {per_page: 3, categories: [1,2,3] } )

而且效果很好。但如何对分类术语做同样的事情呢？

我尝试在查询对象中使用“terms”属性，但这不起作用。

getEntityRecords( 'postType', 'my_post_type', {per_page: 3, terms: [1,2,3] } )

我只想获取特定术语的帖子，但现在我获取所有自定义帖子。

我创建了一个“选项卡式面板”（选项卡式内容）块，它本质上只是一个仅允许“面板”块的 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: …

古腾堡代码块用于在您的 WordPress 帖子和页面中显示代码块。在理想情况下，大多数人只是将代码直接复制并粘贴到这些块中。但我希望能够将代码输入到块中。

如何输入制表符？我希望能够在输入代码时缩进。如果我复制并粘贴一段代码，它不会丢失选项卡。但是，我一直无法输入。

键入 Tab 键会将焦点更改到下一个块。Shift-tab 将焦点更改到上一个块。CTRL-tab 什么也不做。

我已经搜索和谷歌搜索，我只能找到其他人问同样的问题，没有答案。

我对古腾堡完全陌生，我需要在设置部分添加一个新选项卡请检查此屏幕截图

我已经为古腾堡创建了一些块，但没有这方面的经验。我试过这段代码

import { TabPanel } from '@wordpress/components';

    const onSelect = ( tabName ) => {
        console.log( 'Selecting tab', tabName );
    };

    const MyTabPanel = () => (
        <TabPanel className="my-tab-panel"
            activeClass="active-tab"
            onSelect={ onSelect }
            tabs={ [
                {
                    name: 'tab1',
                    title: 'Tab 1',
                    className: 'tab-one',
                },
                {
                    name: 'tab2',
                    title: 'Tab 2',
                    className: 'tab-two',
                },
            ] }>
            {
                ( tab ) => <p>{ tab.title }</p>
            }
        </TabPanel>
    );

但没有帮助我。这里有人请帮助我。提前致谢