标签: gutenberg-blocks

我创建了一个相当简单的手风琴块，它适用于基本文本。问题是我用于手风琴内容的控件是 RichText，它只允许基本格式，例如粗体。

如果我想创建一个无序列表和基本文本怎么办？我目前正在使用multiline: "p"，但是如何添加其他元素以便我也可以在其中添加 UL 元素？

我能想到的只有两个想法，我不知道如何实施。第一个是扩展块工具栏BlockControls以包含额外的 UL 格式化程序，第二个是使用另一个元素而不是 RichText - 例如自由格式（可能已重命名为经典编辑器？） - 但我找不到任何文档这些。

这是我当前代码的示例：

属性

attributes: {
    title: {
        type: 'string',     
        selector: '.hd-accordion-title',
    },  
    content: {
        type: 'array',
        source: 'children',
        selector: '.hd-accordion-content',
    }
},

编辑

edit: function( props ) {
        var title = props.attributes.title;     
        var content = props.attributes.content;

        function onChangeTitle(newTitle) {
            props.setAttributes({
                title: newTitle
            });
        }

        function onChangeContent(newContent) {
            props.setAttributes({
                content: newContent
            });
        }   

        return [
            (
                <div className={"hd-accordion"}>
                    <RichText
                        tagName="h3"
                        className= "hd-accordion-title"
                        value= { …

我正在尝试为古腾堡构建一个自定义块。它是一个轮播并使用子块（图像）。我正在尝试找到一种方法来找出在块内部创建了多少图像块，以便我可以相应地为轮播创建幻灯片。

为了做到这一点，我正在考虑从每个图像块中获取图像 url 并将其存储在一个数组中，这样我就可以映射该数组来创建每张幻灯片，但我不知道如何访问 url 值子块。

有任何想法吗？

我想Section在 WordPress Gutenberg 中创建一个块。我创建了一个部分块并使用古腾堡<InnerBlocks>组件作为内部/子块。它工作正常，但Section块本身显示为其内部块列表。我想Section从其内部块中排除该块。<InnerBlocks>组件有一个属性allowedBlocks来指定允许作为内部块的块。但这对我没有帮助，因为我只想禁止Section来自内部块的块。我如何才能仅禁止来自 的单个特定块<InnerBlocks>？

我需要一个像这样的选项，disallowedBlocks以便我可以从innerBlocks列表中排除块，例如

<InnerBlocks disallowedBlocks={['leo-block/section']} />

完整代码

;(function(wp) {
    const {registerBlockType} = wp.blocks;
    const {InnerBlocks} = wp.editor;
    const {__} = wp.i18n;

    registerBlockType('leo-block/section', {
        title: __('Section'),
        icon: 'grid-view',
        category: 'vr-blocks',
        descrition: __('Section block for manage content section'),
        attributes: {
            content: {
                default: 'Hello World'
            },
            spacing: {
                default: {
                    paddingTop: '70px',
                    paddingBottom: '70px',
                    marginTop: '0',
                    marginBottom: '0'
                }
            }
        }, …

我正在为 WordPress Gutenberg 编辑器创建一些自定义动态块（按照此链接）。

我对这些块使用 PHP 渲染，这意味着我保存了以下代码：

save: function( props ) {
    // Rendering in PHP
      return;

},

渲染函数是通过这个回调调用的：

register_block_type( 'my-plugin/latest-post', array(
    'render_callback' => 'my_plugin_render_block_latest_post',
) );

我不会发布功能代码，因为在这种情况下无关紧要。（我做了一个 WP_Query 并显示一些自定义帖子数据并返回一个 html 代码），

我的问题是 WP Gutenberg 从函数中获取输出并添加 <p> and <br>标签（经典的 wpautop 行为）。

我的问题是：如何仅对自定义块禁用它？我可以用这个：

remove_filter( 'the_content', 'wpautop' );

但我不想改变默认行为。

一些额外的发现。用于块渲染的 php 函数使用 get_the_excerpt()。一旦使用了这个函数（我假设 get_the_content() 正在发生），wpautop 过滤器就会被应用，块的 html 标记就会被弄乱。

我不知道这是一个错误还是预期的行为，但是有没有不涉及删除过滤器的简单解决方案？（对于主题森林的 ex 不允许删除此过滤器。）

我正在使用 Gutenberg 编辑器和 Bootstrap CSS 框架。默认情况下，古腾堡块周围没有容器或类似的东西。

有些块有一个alignwide和alignfull选项，可以在它们周围添加类似容器之类的东西。这些选项适用于封面图像或段落。

但标题块（默认情况下）没有这样的选项。

我很想为每个古腾堡块添加一个额外的复选框，以div在其周围切换一个额外的容器。不只是一个班级。

我找到了一些可以为每个古腾堡博客添加额外风格的东西：https://www.billerickson.net/block-styles-in-gutenberg/

这是那里的代码：

wp.domReady( () => {

    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'default',
        label: 'Default',
        isDefault: true,
    } );

    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'alt',
        label: 'Alternate',
    } );

} );

它效果很好，为块提供了额外的类/风格。但它并没有将任何东西包裹在块周围。

是否有任何选项可以将容器切换（添加类）之类的东西添加div到.container块中？

我的网站中有这个 front-page.php 页面，我想直接在 php 页面中放置一个块代码。所以我有一个 div，我想把它放在那里。但代码就像

<!-- wp:latest-posts {"postsToShow":3,"displayPostContent":true,"excerptLength":30,"displayPostDate":true,"postLayout":"grid","displayFeaturedImage":true,"featuredImageSizeSlug":"large","align":"wide","className":"tw-mt-8 tw-img-ratio-3-2 tw-stretched-link is-style-default"} /-->

它来自一个小部件。我无法让它工作，请帮忙：D

古腾堡仍然很新，但我仍然希望有人遇到此问题并找到解决方案。

我使用了create-guten-block来创建一个项目并创建一个测试块。我遇到的问题是，当我尝试使用React组件修改前端的状态时，什么都没有发生。组件可以通过save（）很好地加载，但是当您尝试执行一些简单的操作（如切换列表）时，前端仍然无法响应状态更改。我还要注意，create-guten-block不会加载任何前端JS，因此我交换了已编译的javascript以加载到前端，但仍然无法使其正常工作。

这是我从Codecademy提取的一些代码，作为一个简单的示例进行测试。选择名称时，它将更改sibling.js中的文本以显示名称。该代码在create-react-app中可以正常工作，但作为Gutenberg中的块，在前端没有任何作用：

block.js

import { Parent } from './parent';

// More code here 

save: function( props ) {
    return (
          <div>
              <Parent />
          </div>
     );
 },

parent.js

import React from 'react';
import { Child } from './child';
import { Sibling } from './sibling';

export class Parent extends React.Component {
    constructor(props) {
        super(props);

        this.state = { name: 'Frarthur' };

        this.changeName = this.changeName.bind(this);
    }

    changeName(newName) {
        this.setState({
        name: newName
        });
    }

    render() {
        return (
        <div>
            <Child onChange={this.changeName} />
            <Sibling name={this.state.name} …

我试图让使用自定义帖子类型处理产品的Wordpress插件/主题的用户创建一个块，以显示这些自定义帖子之一的摘要。我正在尝试通过在官方教程的基础上在插件中创建一个自定义块来实现这一目标。我想在古腾堡（Gutenberg）后端上简单地显示一个带有所有自定义帖子作为选项的选择框，但是我愿意接受建议。

我试图阅读我可以传递给该块的javascript文件中的getEntityRecords函数的内容，但是文档似乎确实很少。如果有人能指出正确的方向，我将非常感激。我也尝试设置'taxonomy'而不是'postType'，但也没有用。没有好的API文档，可能的选项和参数很难猜测。

这是我的代码（的一部分）。我想知道第getEntityRecords3行的可能参数。

edit: withSelect( function( select ) {
    // setting postType to 'product' does not work for me here
    var pages = select('core').getEntityRecords('postType', 'page', { per_page: 10 });
    return {
        posts: pages
    };
} )( function( props ) {
    if ( ! props.posts ) {
        return "Loading...";
    }

    if ( props.posts.length === 0 ) {
        return "No posts";
    }
    var className = props.className;
    var post = props.posts[ 0 ]; …

最近更新了 WP 和插件。我在古腾堡编辑器中的“按类别划分的产品”块现在呈现非常不同。

经过一番挖掘，现在看来WGPB_Block_Grid_Base render和render-product函数正在定义内容的外观。这忽略了我之前针对此块存在的大部分自定义操作和标记工作。

这是一种完全不同的动物，看着它我什至不知道从哪里开始。有一个过滤器直接应用于过滤器应用内的标记内联：

    return apply_filters(
        'woocommerce_blocks_product_grid_item_html',
        "<li class=\"wc-block-grid__product\">
            <a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
                {$data->image}
                {$data->title}
            </a>
            {$data->price}
            {$data->badge}
            {$data->rating}
            {$data->button}
        </li>",
        $data,
        $product
    );

有没有一种简单的方法来覆盖他们正在使用的模板？或者我基本上坚持编写我自己的整个古腾堡块插件来让它回到原来的位置？

如何制作一个下拉列表控件来获取自定义帖子类型的名称？在我的项目中，我想选择一个帖子类型名称并在我的自定义古腾堡块的下拉选择器中获取它！..我该怎么做？

我正在努力解决我的自定义古腾堡附加插件中的问题。有时，它会导致古腾堡编辑器崩溃并显示以下错误消息。

ypeError：this.activateMode 不是一个函数

react-dom.min.js?ver=16.9.0:103 TypeError: this.activateMode is not a function
    at media-views.min.js?ver=5.5:2
    at st (build.js?ver=1.0.0:9)
    at Function.sa (build.js?ver=1.0.0:9)
    at i._createModes (media-views.min.js?ver=5.5:2)
    at initialize (media-views.min.js?ver=5.5:2)
    at initialize (media-views.min.js?ver=5.5:2)
    at initialize (media-views.min.js?ver=5.5:2)
    at i.h.View (backbone.min.js?ver=1.4.0:2)
    at i.constructor (wp-backbone.min.js?ver=5.5:2)
    at i.constructor (media-views.min.js?ver=5.5:2)

我还关注了以下文章： https://wpdevelopment.courses/articles/how-to-fix-activatemode-is-not-a-function-error-in-gutenberg/，

根据上面的文章，该问题在某种程度上是由 Lodash 依赖项引起的。因此我删除了 Lodash。但似乎没有什么可以修复这个错误。

尽管如此，问题仍然存在。它不会一直出现，但偶尔会出现。

注意：当用户清除localStorage时，该错误可以暂时消除。

任何帮助解决这个问题将不胜感激。

PS 问题出在这个插件上。 https://wordpress.org/plugins/editorplus/

穆尼尔·蒂亚

我有一个属性，旨在由数字控制属性控制

<NumberControl
  label={__("SM")}
  onChange={(value) => setAttributes({ SM: value })}
  value={attributes.SM}
  help={__("Response SM Setting for Column")}
  min={0}
  max={12}
/>;

我这样做有什么问题吗？