动态古腾堡块对齐

时间:2019-07-11 11:11:52

标签: javascript php gutenberg-blocks

我正在创建一个动态块(使用PHP查看)。我需要data-align属性。要在PHP中检索data-align属性,我创建一个属性…

function capacity_after_setup_theme() {
	add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'capacity_after_setup_theme' );

supports: {
    align: ["full"]
  },

blockWith() {
      var wrap = document.querySelector(
        '[data-type="capacity/employee-skills"]'
      );
      if (
        wrap.getAttribute("data-align") != "full" &&
        this.props.attributes.isFullWidth
      )
        wrap.setAttribute("data-align", "full");
      var config = { attributes: true, childList: false };
      var callback = function(mutationsList) {
        for (var mutation of mutationsList) {
          if (
            mutation.type == "attributes" &&
            mutation.attributeName == "data-align"
          ) {
            if (wrap.hasAttribute("data-align"))
              this.props.setAttributes({ isFullWidth: true });
            else this.props.setAttributes({ isFullWidth: true });
          }
        }
      };
      var observer = new MutationObserver(callback);
      observer.observe(wrap, config);
    }

它不是更干净的方法吗?

0 个答案:

没有答案