I have created a custom banner image block for Gutenberg, which works great, but I want to know if it is possible to use the page title as the current banner text placeholder until it has been edited?

My Edit function is

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

Thanks :)

I have created a custom banner image block for Gutenberg, which works great, but I want to know if it is possible to use the page title as the current banner text placeholder until it has been edited?

My Edit function is

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

Thanks :)

• block-editor

Share Improve this question asked Aug 6, 2018 at 12:20 DesignMonkeyJimDesignMonkeyJim 34933 silver badges99 bronze badges 0

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 4

Due to the getDocumentTitle selector being deprecated as mentioned here https://stackoverflow/questions/51674293/use-page-title-in-gutenberg-custom-banner-block/51792096#comment92130728_51792096

I managed to get it working with a slight tweak to the code by 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
]; 

Thanks to the answer in this post i have managed to add the title into the banner and it updates as the post title is being updated.

https://stackoverflow/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
        ]; 

This worked for me

let title = typeof select("core/editor").getPostEdits().title !== 'undefined' ? select("core/editor").getPostEdits().title : select("core/editor").getCurrentPost().title;