Использование компонентов Wordpress Gutenberg в разработке плагинов - PullRequest
1 голос
/ 04 июля 2019

Я хотел бы использовать компоненты Wordpress Gutenberg для разработки админ-панели плагина, но у меня есть некоторые проблемы со стилем, поэтому, пожалуйста, дайте мне знать, возможно ли использовать эти компоненты для разработки админ-стороны плагина?И как я могу исправить эти проблемы со стилем?

Код компонента:

import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import {
    Panel,
    PanelBody,
    PanelRow,
    TextControl,
    TextareaControl,
    ColorPalette
} from '@wordpress/components';

export default class Account extends Component {
    constructor() {
        super( ...arguments );

        this.state = {
            name: '',
            number: '',
            default_text: '',
            button_label: '',
            button_color: '',
            button_text_color: ''
        };
    }

    render() {
        const colors = [
            { name: 'red', color: '#f00' },
            { name: 'white', color: '#fff' },
            { name: 'blue', color: '#00f' },
        ];

        return (
            <div>
                {/* <Panel header={ __( 'Account', 'easy-wordpress-whatsapp' ) }> */}
                    <PanelBody initialOpen={ true } title={ __( 'Account', 'easy-wordpress-whatsapp' ) }>
                        <PanelRow>
                            <TextControl
                                label={ __( 'Name', 'easy-wordpress-whatsapp' ) }
                                onChange={ value => this.setState( { name: value } ) }
                                required
                                value={ this.state.name }
                            />
                        </PanelRow>

                        <PanelRow>
                            <TextControl
                                label={ __( 'Number or Group Chat URL', 'easy-wordpress-whatsapp' ) }
                                onChange={ value => this.setState( { number: value } ) }
                                required
                                value={ this.state.number }
                            />
                        </PanelRow>

                        <PanelRow>
                            <TextareaControl
                                label={ __( 'Default Text', 'easy-wordpress-whatsapp' ) }
                                onChange={ value => this.setState( { default_text: value } ) }
                                value={ this.state.default_text }
                            />
                        </PanelRow>
                    </PanelBody>
                {/* </Panel> */}

                {/* <Panel header={ __( 'Button', 'easy-wordpress-whatsapp' ) }> */}
                    <PanelBody initialOpen={ true } title={ __( 'Button', 'easy-wordpress-whatsapp' ) }>
                        <PanelRow>
                            <TextControl
                                label={ __( 'Label', 'easy-wordpress-whatsapp' ) }
                                onChange={ value => this.setState( { button_label: value } ) }
                                required
                                value={ this.state.button_label }
                            />
                        </PanelRow>

                        <PanelRow>
                            <ColorPalette
                                colors={ colors }
                                value={ this.state.button_color }
                                onChange={ ( color ) => this.setState( { color } ) }
                            />
                        </PanelRow>

                        <PanelRow>
                            <ColorPalette
                                colors={ colors }
                                value={ this.state.button_text_color }
                                onChange={ ( color ) => this.setState( { color } ) }
                            />
                        </PanelRow>
                    </PanelBody>
                {/* </Panel> */}

            </div>
        )
    }
}

Кроме того, я должен сказать, что я поставил в очередь стили "wp-component" и javascript.

$this->enqueue_style( 'wp-components' );
$this->enqueue_script(
'whatsapp',
 $this->get_asset_url( 'dist/admin/index.js' ),
 array(
  'wp-components',
  'wp-data',
  'wp-element',
  'wp-hooks',
  'wp-i18n',
 )
);

Gutenberg Components in Wordpress admin

Gutenberg ColorPallete issue in wordpress admin

...