javascript – 在Gutenberg自定义横幅广告块中使用页面标题

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

我的编辑功能是

 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
        ];

谢谢：)

解决方法:

Gutenberg使用wp.data存储当前编辑器状态,这是对Redux的抽象.要获得标题(或100+ other values),我们需要查询核心/编辑器数据存储.

一旦我们知道在哪里看,获得标题很简单：

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

这有效,但没有响应.当帖子标题更改时,标题不会反映新值.那是一种失望.

为了反映编辑器标题的更改,我们需要监听核心/编辑器数据存储的更改.有几种方法可以做到这一点.

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

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标签.这比嵌套回调或其他更改处理程序更清晰.

高阶组件可能难以遵循.简短的解释是它们包装现有组件,生成一些数据,然后返回组件的副本,新数据作为props传递.这将逻辑与表示分开,有助于维护.

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

withSelect是一个函数构造函数或装饰器.它接受一个函数参数,并返回一个需要组件的新函数.通常,立即调用返回的函数(排序为IIFE),但为了清楚起见,我将其存储在selectTitle变量中.新函数生成一个包含标题的对象,该对象将作为props传递给传递给withSelect的任何组件.通过一些魔术,只要数据存储更新,就会调用它.

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

javascript – 在Gutenberg自定义横幅广告块中使用页面标题

相关文章