标签: gutenberg-blocks

添加特定古腾堡块后立即运行脚本

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

var map = new google.maps.Map(document.getElementById('map-canvas')
Run Code Online (Sandbox Code Playgroud)

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

wordpress-gutenberg gutenberg-blocks

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

WordPress Gutenberg:此块包含意外或无效的内容

我正在创建非常简单的文本块。当我第一次添加时,该块工作正常。如果刷新页面并尝试编辑该块,则会显示消息“此块包含意外内容或无效内容”。我试图禁用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', …
Run Code Online (Sandbox Code Playgroud)

wordpress wordpress-gutenberg gutenberg-blocks

5
推荐指数
2
解决办法
1821
查看次数

古腾堡核心块 - 删除选项

使用核心 WP Gutenberg 块非常棒,但在某些情况下,我想完善可用选项以改善客户的用户体验,并避免他们有太多选项。

例如,在标题块中,我想删除“级别”H1 和 H6,以及所有“对齐”选项。

在段落块中,我想禁用“字体大小”和“首字下沉”选项。

我查阅了 API 文档,但没有成功。

javascript php wordpress wordpress-gutenberg gutenberg-blocks

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

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

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

我已将以下内容添加到我的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
查看次数

如何修复 WordPress 中的“错误加载块:无效参数:属性”错误

我正在尝试扩展在 Tasty Recipes 插件中注册的现有块。我在侧边栏添加了一个控件来处理给定饮食类型的选择,但是当选择一个选项时,会显示以下错误:

加载块时出错:无效参数:属性

目前在 WordPress 5.2.1 上运行,我正在尝试扩展Tasty Recipes 插件

扩展TastyRecipes.js

/**
 * Add custom attribute to store diet type
 */

var addCustomAttributes = function( settings, name ) {

    if ( name !== 'wp-tasty/tasty-recipe' ) {
        return settings;
    }

    settings.attributes = Object.assign( settings.attributes, {
        dietType: {
            type: 'string',
            // ? Setting default here causes break
        },
    } );

    return settings;
}

wp.hooks.addFilter( 'blocks.registerBlockType', 'wp-tasty/tasty-recipe', addCustomAttributes );


/**
 * Create HOC to add diet type control to inspector controls …
Run Code Online (Sandbox Code Playgroud)

wordpress wordpress-gutenberg gutenberg-blocks

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

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

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

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

php wordpress wordpress-gutenberg gutenberg-blocks

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

使用 wp_insert_post() 时如何在 post_content 中插入古腾堡块?

我想在 php 中生成一个古腾堡块。

我目前正在开发一个 wordpress 插件,可以从 youtube 导入视频并为每个视频创建一个帖子。我可以在 post_content 中插入 youtube 视频,但是当我使用古腾堡编辑器编辑帖子时,它不会显示为块。

我在这里阅读了大部分“块编辑器手册” https://developer.wordpress.org/block-editor/ 但除了如何创建自定义块之外,我找不到任何东西。我也在谷歌上搜索过,但我发现的一切也是关于创建自定义块。然而我发现古腾堡块作为 html 评论存储在 post_content 中,但该评论似乎是通过古腾堡所见即所得编辑器用 js 生成的。

我知道我可以用块创建一个帖子并从我的数据库中复制 post_content 然后将其用作“模板”,但我认为这不是一种正确的方法。

是否有任何关于使用 wordpress 附带的块(即:嵌入、段落)并生成 html 评论的文档,该评论保存在 post_content 与 php 中?甚至有可能吗?

php wordpress wordpress-gutenberg gutenberg-blocks

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

根据古腾堡块中另一个 SelectControl 的输入过滤 SelectControl 项(ES5,无 JSX)

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

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

onChange: function(value) {
    selectedType = value;
}
Run Code Online (Sandbox Code Playgroud)

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

(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: …
Run Code Online (Sandbox Code Playgroud)

wordpress wordpress-gutenberg gutenberg-blocks

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

有没有办法在 WordPress 古腾堡编辑器中添加新选项卡

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

在此输入图像描述

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

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

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

wordpress reactjs wordpress-gutenberg gutenberg-blocks create-guten-block

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

古腾堡块:使用“register_block_type_from_metadata()”注册多个块会在控制台中引发错误

我正在练习如何创建古腾堡块插件。我使用@wordpress/create-block来创建块插件。

编辑:我没有像我最初所说的那样使用 wp-cli 脚手架,我想写的是我使用了 @wordpress/create-block。

脚手架上只有一个块,因此,如果您想要多个块,则必须修改结构,这并不难,但是,我希望这些块使用 block.json 来注册块register_block_type_from_metadata(),我实现了,但问题是,如果我在主插件的 PHP 文件中使用此代码(register_block_type_from_metadata两次):

function blocks_boilerplate_block_init() {
    register_block_type_from_metadata( __DIR__ . '/src/blocks/example');
    register_block_type_from_metadata( __DIR__ . '/src/blocks/example2');
}
add_action( 'init', 'blocks_boilerplate_block_init' );
Run Code Online (Sandbox Code Playgroud)

为了注册这些块,这些块被注册并且它们工作没有问题,但是 Chrome 控制台显示两个错误。

块“create-block/boilerplate-example”已注册。

块“create-block/guten-block-example2”已注册。

如果我register_block_type_from_metadata() 只使用一次,错误就会消失。

关于如何使错误消失有什么想法吗?

php wordpress wordpress-gutenberg gutenberg-blocks

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