Question

我为古腾堡创建了一个自定义横幅图像块，效果很好，但是我想知道是否可以将页面标题用作当前标题文本占位符直到被编辑？

我的编辑功能是

 return [
            el('div', {className:'header-banner'},
                el(
                    element.Fragment,
                    null,
                    controls,
                    el( "div",{
                        className: 'banner-image',
                        style: { backgroundImage: 'url('+attributes.mediaURL+')' }
                    },
                    attributes.title || isSelected ?  el(RichText, {
                            key: 'editable',
                            tagName: "h1",
                            className: "banner-title",
                            //Can i add the page title in here if it is avaiable??
                            //placeholder: i18n.__('Write title…'),
                            value: attributes.title,
                            onChange: function onChange(value) {
                                return props.setAttributes({ title: value });
                            },
                            inlineToolbar: true
                        }) : null 

                    )
                )
            )//header-banner
        ];

谢谢：）

Answer 1

Gutenberg使用wp.data存储当前的编辑器状态，这是Redux的抽象。要获取标题（或100+ other values），我们需要查询core/editor数据存储。

一旦我们知道了要看的地方，就很容易获得标题：

const { select } = wp.data;
const title = select("core/editor").getDocumentTitle();

可以，但是没有响应。帖子标题更改后，title将不会反映新的值。真令人失望。

要反映对编辑器标题的更改，我们需要侦听core/editor数据存储区的更改。有几种方法可以做到这一点。

一种解决方案是定义一个简单的变更处理程序功能，并将其订阅数据存储更新：

const { select } = wp.data;

function logTitle() {
  const title = select("core/editor").getDocumentTitle();
  console.log("Editor Title:", title);
}
subscribe(logTitle);

任何 wp.data商店的价值都会更新，这会触发-发生的次数很多。

似乎是古腾堡（Gutenberg）批准的包含数据存储值的方法是使用高阶组件直接包含值：

const GetTitle = props => <div>{props.title}</div>;

const selectTitle = withSelect(select => ({
  title: select("core/editor").getDocumentTitle()
}));
const PostTitle = selectTitle(GetTitle);

然后在该块的输出中，包含一个<PostTitle /> jsx标记。这比嵌套回调或其他更改处理程序要干净得多。

高阶成分可能很难理解。简短的解释是，它们包装了一个现有组件，生成了一些数据，然后返回该组件的副本，并带有作为道具传递的新数据。这将逻辑与表示分离开来，并有助于维护。

GetTitle很简单，它只是一个很小的组件，它带有一个带有标题键的props对象，并吐出一些html。

withSelect是一个函数构造器或装饰器。它接受一个函数参数，并返回一个需要组件的新函数。通常，返回的函数会立即被调用（一种IIFE），但是为了清楚起见，我将其存储在selectTitle变量中。新函数将生成一个包含标题的对象，该对象将作为道具传递给传递给withSelect的任何组件。通过某种魔术，每当数据存储更新时，就会调用它。

最后，PostTitle包含函数结果selectTitle，该结果是预先填充了生成的props的组件。然后可以使用<PostTitle />标签将此组件放入我们的标记中。每当编辑器数据存储区更新时，更高级别的组件都会反映新数据。

Answer 2

@joemaller感谢您的有用回复。

这是一个示例，演示如何使用withSelect()包装通过传递给edit的块配置对象的registerBlockType()属性定义的组件。

该组件通过道具传递给title。

如果用户编辑帖子/页面标题，则该组件将使用新标题重新渲染，因为其道具将会更改。这使它可以“实时”更新。

import { withSelect } from '@wordpress/data'

...

edit: withSelect(
  ( select ) => {
    return {
      title: select( 'core/editor' ).getEditedPostAttribute( 'title' ),
    }
  } )( props => {
    return (
      <div>{ props.title }</div>
    )
} ),

在古腾堡自定义横幅块中使用页面标题

2 个答案: