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

时间：2018-08-06 作者：Jim-miraidev

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

enter image description here

我的编辑功能是

 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
        ];
谢谢：）

3 个回复
最合适的回答,由SO网友:codekipple 整理而成

由于getDocumentTitle 此处提到的选择器已弃用https://stackoverflow.com/questions/51674293/use-page-title-in-gutenberg-custom-banner-block/51792096#comment92130728_51792096

我对Jim miraidev的代码做了一点小小的修改，就成功了

var GetTitle = function GetTitle(props) {
    return el("h1", {className: "jab-banner-title"}, props.title);
};

var selectTitle = withSelect(function (select) {
    var title;

    if (typeof select("core/editor").getPostEdits().title !== \'undefined\') {
        title = select("core/editor").getPostEdits().title;
    } else {
        title = select("core/editor").getCurrentPost().title;
    }

    return {
        title: title
    };
});
var PostTitle = selectTitle(GetTitle);
。。。。。

return [
    el(\'div\', {className:\'jab-header-banner \'+classes+\'\'},
        el(
            element.Fragment,
            null,
            controls,
            el( "div",{
                className: \'jab-banner-image\',
                style: { backgroundImage: \'url(\'+attributes.mediaURL+\')\' }
            },
            el(PostTitle,{className: "jab-banner-title"})
            )
        )
    )//header-banner
];

SO网友:Jim-miraidev

多亏了这篇文章中的答案，我成功地将标题添加到横幅中，并随着文章标题的更新而更新。

https://stackoverflow.com/questions/51674293/use-page-title-in-gutenberg-custom-banner-block/51792096#51792096

var withSelect  = wp.data.withSelect;

var GetTitle = function GetTitle(props) {
      return el("h1",{className: "jab-banner-title"},props.title);
};

var selectTitle = withSelect(function (select) {
     return {
            title: select("core/editor").getDocumentTitle()
     };
});
var PostTitle = selectTitle(GetTitle);
。。。。。

 return [
            el(\'div\', {className:\'jab-header-banner \'+classes+\'\'},
                el(
                    element.Fragment,
                    null,
                    controls,
                    el( "div",{
                        className: \'jab-banner-image\',
                        style: { backgroundImage: \'url(\'+attributes.mediaURL+\')\' }
                    },
                    el(PostTitle,{className: "jab-banner-title"})
                    )
                )
            )//header-banner
        ];

SO网友:BenB

This worked for me

let title = typeof select("core/editor").getPostEdits().title !== \'undefined\' ? select("core/editor").getPostEdits().title : select("core/editor").getCurrentPost().title;
结束
标签： block-editor   小码农  

相关推荐