如何在Gutenberg编辑器中获取所选页面模板的值？

时间：2019-05-30 作者：Hector

如何在编辑页面中检测所选页面模板的值？我使用jQuery选择页面属性选择框，但当我们隐藏编辑器侧栏时，它不起作用；因为它删除了该设置的标记。我认为它将数据保存在某个地方，因为我们可以在不做任何更改的情况下带回提要栏。

我的代码：$(\'.editor-page-attributes__template select\').val()

当侧边栏关闭时，是否有任何方法可以获取值？就像页面中的任何JavaScript变量一样，当我们更改页面模板时会更新。

注意：我的意思是获取值并在JavaScript中使用它，而无需刷新或更新编辑器。

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

我稍微修改了SkyShab的代码，因为它在页面加载时触发了模板更改事件，而在模板更改为默认值时没有触发（因为getEditedPostAttribute（\'template\'）当时是“”，在测试模板更改时等于null）

const { select, subscribe } = wp.data;

class PageTemplateSwitcher {

    constructor() {
        this.template = null;
    }

    init() {

        subscribe( () => {

            const newTemplate = select( \'core/editor\' ).getEditedPostAttribute( \'template\' );
            if (newTemplate !== undefined && this.template === null) {
                this.template = newTemplate;
            }

            if ( newTemplate !== undefined && newTemplate !== this.template ) {
                this.template = newTemplate;
                this.changeTemplate();
            }

        });
    }

    changeTemplate() {
        // do your stuff here
        console.log(\'template changed to ${this.template}\');
    }
}

new PageTemplateSwitcher().init();

SO网友:SkyShab

要获得此值，请使用wp。数据模块。

const template = wp.data.select( \'core/editor\' ).getEditedPostAttribute( \'template\' );
由于这可以在文档设置中更改，因此您可能需要“订阅”并在更改时运行回调。

例如：

const { select, subscribe } = wp.data;

class PageTemplateSwitcher {

  constructor() {
    this.template = null;
  }

  init() {

    subscribe( () => {

      const newTemplate = select( \'core/editor\' ).getEditedPostAttribute( \'template\' );

      if ( newTemplate && newTemplate !== this.template ) {
        this.template = newTemplate;
        this.changeTemplate();
      }

    });
  }

  changeTemplate() {
    // do your stuff here
    console.log(`template changed to ${this.template}`);
  }
}

new PageTemplateSwitcher().init();

标签： javascript   editor   block-editor   post-editor   小码农  

相关推荐

如何在WordPress中正确添加和访问一个JavaScript文件？

我打算在我的WP网站上使用JavaScript库，并已通过FTP将JS文件上载到当前激活主题的以下目录：/public_html/wp-content/themes/salient/js然后，为了加载JavaScript，我在“页眉和页脚”设置中添加了以下行（在正文结束标记之前插入）：<script type=\"text/javascript\" src=\"https://www.mypage.../public_html/wp-content/themes/salient/js/javascr