Построение пользовательского столбца блока Гутенберга с использованием InnerBlocks - PullRequest
Новая
       25

Построение пользовательского столбца блока Гутенберга с использованием InnerBlocks

0 голосов
/ 04 октября 2019

Я хочу создать строку / столбец блока Гутенберга, аналогично уже установленному блоку столбцы , который использует Гутенберг.

Я хочу, чтобы функциональность была примерно такой же, однако использовать мойПользовательские стили на столбцах. Например, у каждой строки будет 3 столбца, и у каждого из этих столбцов есть возможность выбрать сообщение, которое будет отображаться в интерфейсе. В первом столбце будут стили, которые улучшают текст и img и т. Д., Чтобы идентифицировать его как «признак».

Я хочу создать его по своему усмотрению, а не просто устанавливать шаблон по разным причинам, так что это пользовательскийРешение кода.

Сначала я попытался сделать это, используя <InnerBlocks />, как показано в приведенном ниже коде: 

const { __ } = wp.i18n;
const { registerBlockType, InspectorControls } = wp.blocks;
const { InnerBlocks } = wp.editor;
// const { withSelect } = wp.data;
const { SelectControl } = wp.components;
const { Component } = wp.element;
import { ReactComponent as Logo } from "../ga-logo.svg";

const TEMPLATE = [
  ['ga/select-post', {placeholder: 'Enter featured article...'}, []],
  ['ga/select-post', {placeholder: 'Article 2'}, []],
  ['ga/select-post', {placeholder: 'Article 3'}, []]
]

registerBlockType("ga/select-post-nested", {
  title: "Select Post Nested",
  icon: { src: Logo },
  category: "gourmet-artist",

  edit: props => {
    // return "engage";
    const { className } = props;
    return [
      <div className={className}>
        <InnerBlocks template={TEMPLATE} />
      </div>
    ];
  },

  save: props => {
    return (
      <div className={props.className}>
        <InnerBlocks.Content />
      </div>
    );
  }
});

Однако это не возвращает селекторы сообщений в формате строки / столбца.

Когда я пытаюсь обернуть <InnerBlocks /> во флекс-контейнер, а затем пропустить класс, который я идентифицировал как .featuredBlock, который имеет указанные ниже стили в качестве className через шаблон, стили не принимаютэффект, и сообщения по-прежнему отображаются в виде списка, а не в виде строки, как предполагалось:

editor.css 

.featuredContainer {
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */
  align-items: center;
}

.featuredBlock {
  width: 30%;
  margin-left: 2%;
  border: 1px solid black;
}

index.js 

const TEMPLATE = [
      ['ga/select-post', {className: "featuredBlock"}, []],
      ['ga/select-post', {className: "featuredBlock"}, []],
      ['ga/select-post', {className: "featuredBlock"}, []]
    ]

    registerBlockType("ga/select-post-nested", {
      title: "Select Post Nested",
      icon: { src: Logo },
      category: "gourmet-artist",

      edit: props => {
        return [
          <div className="featuredContainer">
            <InnerBlocks template={TEMPLATE} />
          </div>
        ];
      },

      save: props => {
        return (
          <div className={props.className}>
            <InnerBlocks.Content />
          </div>
        );
      }
    });

I 'Мне интересно, почему это не вступает в силу? Или, может быть, есть лучший способ подойти к этому?

...