UI KIt Card GutenBlock

index.js

/**
 * Block dependencies
 */
//import icon from './icon';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const { registerBlockType, Editable } = wp.blocks;

/**
 * Register UI Kit Card block
 */
export default registerBlockType(
    'uikit/card',
    {
        title: __('UI Kit Card'),
        category: 'common',
        //icon: icon,
        keywords: [
            __('UI Kit'),
            __('Card'),
            __('Field'),
        ],
        attributes: {
            title: {
                source: 'text',
                type: 'string',
                selector: '.uk-card-title',
            },
            content: {
                source: 'html',
                selector: '.uk-card-content',
            }
        },
        edit: props => {
            const onChangeTitle = value => {
                props.setAttributes({ title: value });
            };
            const onChangeContent = value => {
                props.setAttributes({ content: value });
            };
            return (
                <div className="uk-card uk-card-default uk-card-body uk-width-1-2@m">
                    <h3 class="uk-card-title">
                        <Editable
                            tagName="h3"
                            placeholder={__('Enter your card title...')}
                            value={props.attributes.title}
                            onChange={onChangeTitle}
                            focus={props.focus}
                        />
                    </h3>
                    <p class="uk-card-content">
                        <Editable
                            tagName="p"
                            multiLine="p"
                            placeholder={__('Enter your card content...')}
                            value={props.attributes.content}
                            onChange={onChangeContent}
                            focus={props.focus} />
                    </p>
                </div>
            );
        },
        save: props => {
            return (
                <div className="uk-card uk-card-default uk-card-body uk-width-1-2@m">
                    <h3 class="uk-card-title">
                        {props.attributes.title}
                    </h3>
                    <p class="uk-card-content">
                        {props.attributes.content}
                    </p>
                </div>
            );
        },
    },
);