Добавить расширения в блоки GutenBurg - PullRequest
Новая
       18

Добавить расширения в блоки GutenBurg

1 голос
/ 12 марта 2019

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

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

registerBlockType( 'hwb/grid-column',  {
title: __( 'Column' ),
parent: [ 'hwb/grid' ],
description: __( 'A single column within a grid block.' ),
icon: getIcon( 'block-grid-column' ),
category: 'mycategory',
supports: {
        styles: true,
        spacings: true,
        display: true,
        scrollReveal: true,
    },

// Other code like edit and save functions
}

Ответы [ 2 ]

0 голосов
/ 13 марта 2019

Это не базовые расширения, а созданные GhostKit
Вы можете включить в свой плагин.

Включить расширение GhostKit (интервалы) 

<?php
registerBlockType( 'my/block', {
    title: 'My block',
    ghostkit: {
        supports: {
            spacings: true,
        },
    },
    ...
} );

Для получения дополнительной информации GhostKit Spacing Extension

0 голосов
/ 12 марта 2019

«Поддерживает» свойство поддерживает только эти значения из коробки: https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-registration/#supports-optional

Если вы хотите создать новые панели боковой панели, вам нужно будет использовать компонент InspectorControls в вашей функции редактирования, и все, что вы поместите внутрь, появится на боковой панели. Примерно так: 

const { PanelBody } = wp.components
const { InspectorControls } = wp.editor
const { Fragment } = wp.element

edit(props) {
  return (
    <Fragment>
      <InspectorControls>
        <PanelBody title="Panel Heading">
          <p>I will be in the sidebar</p>
        </PanelBody>
      </InspectorControls>
      <p>I will be in the main content area.</p>
    </Fragment>
  )
}

https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbars-and-inspector/

...