Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * 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>
- );
- },
- },
- );
Add Comment
Please, Sign In to add comment