lead.js

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/blockEditor';

registerBlockType( 'russmedia/nordstern-lead', {
	title: __( 'Lead', 'russmedia-nordstern-gutenberg' ),
	icon: 'editor-table',
	category: 'common',
	keywords: [ __( 'Lead', 'russmedia-nordstern-gutenberg' ), 'Russmedia' ],
	attributes: {
		content: {
			source: 'text',
			selector: '.lead',
		},
	},

	edit: ( props ) => {
		const { content } = props.attributes;

		return (
			<div className={ props.className }>
				<RichText
					tagName="h4"
					multiline={ false }
					className="lead"
					placeholder={ __( 'Lead', 'russmedia-nordstern-gutenberg' ) }
					formattingControls={ [] }
					unstableOnSplit={ ( before, after, ...blocks ) => {
						/* does nothing... */
					} }
					value={ content }
					onChange={ ( newContent ) => {
						const newObject = Object.assign( {}, { content: newContent } );
						props.setAttributes( newObject );
					} }
				/>
			</div>
		);
	},

	save: ( props ) => {
		const { content } = props.attributes;
		if ( content ) {
			return (
				<h4 className="wp-block-russmedia-nordstern-lead lead">{ content }</h4>
			);
		}
		return null;
	},
} );