index.js

import classnames from 'classnames';

import { textColors, backgroundColors } from '../colors';

const {
	registerBlockType,
} = wp.blocks;
const {
	InspectorControls,
	InnerBlocks,
	withColors,
	getColorClass,
} = wp.editor;
const {
	PanelBody,
	withFallbackStyles,
	PanelColor,
	ColorPalette,
	ToggleControl,
	PanelRow,
} = wp.components;

const {
	compose,
	Fragment,
	Component,
} = wp.element;

const {getComputedStyle} = window;

const FallbackStyles = withFallbackStyles((node, ownProps) => {
	const {textColor, backgroundColor} = ownProps.attributes;
	const editableNode = node.querySelector('[contenteditable="true"]');
	//verify if editableNode is available, before using getComputedStyle.
	const computedStyles = editableNode ? getComputedStyle(editableNode) : null;
	return {
		fallbackBackgroundColor: backgroundColor || !computedStyles ? undefined : computedStyles.backgroundColor,
		fallbackTextColor: textColor || !computedStyles ? undefined : computedStyles.color,
	};
});

//import ColorPalette from '../components/color-picker';

class TwoColumnBlock extends Component {
	constructor() {
		super(...arguments);
	}

	render() {
		const {
			attributes,
			setAttributes,
			mergeBlocks,
			onReplace,
			className,
			backgroundColorLeft,
			backgroundColorRight,
			textColorLeft,
			textColorRight,
			setBackgroundColorLeft,
			setBackgroundColorRight,
			setTextColorLeft,
			setTextColorRight,
			fallbackBackgroundColor,
			fallbackTextColor,
			fallbackFontSize,
		} = this.props;

		const {
			align,
			content,
			dropCap,
			placeholder,
			centeredContent,
		} = attributes;

		return (
			<div
				className={classnames(className, {
					['left-column-' + backgroundColorLeft.class]: backgroundColorLeft.class,
					['left-column-' + textColorLeft.class]: textColorLeft.class,
					['right-column-' + backgroundColorRight.class]: backgroundColorRight.class,
					['right-column-' + textColorRight.class]: textColorRight.class,
					['-centered-content']: centeredContent,
				})}
			>
				<InnerBlocks layouts={[
					{name: 'column-1', label: 'Spalte 1', icon: 'columns'},
					{name: 'column-2', label: 'Spalte 2', icon: 'columns'},
				]}/>
				<InspectorControls>
					<PanelBody title={ 'Anordnung der Spalten-Inhalte' }>
						<PanelRow>
						<ToggleControl
							label='Die Inhalte der beiden Spalten zueinander zentrieren'
							checked={ centeredContent }
							onChange={() => setAttributes( {centeredContent: ! centeredContent } )}
						/>
						</PanelRow>
					</PanelBody>
					<PanelBody title={'Farbschema'}>
						<PanelColor {...{title: 'Textfarbe (linke Spalte)', colorName: textColorLeft.name, colorValue: textColorLeft.value, initialOpen: false }} >
							<ColorPalette
								colors={textColors}
								disableCustomColors={true}
								value={textColorLeft.value}
								onChange={setTextColorLeft}
							/>
						</PanelColor>

						<PanelColor {...{title: 'Hintergrundfarbe (linke Spalte)', colorName: backgroundColorLeft.name, colorValue: backgroundColorLeft.value, initialOpen: false }} >
							<ColorPalette
								colors={backgroundColors}
								disableCustomColors={true}
								value={backgroundColorLeft.value}
								onChange={setBackgroundColorLeft}
							/>
						</PanelColor>
						
						<PanelColor {...{title: 'Textfarbe (rechte Spalte)', colorName: textColorRight.name, colorValue: textColorRight.value, initialOpen: false }} >
							<ColorPalette
								colors={textColors}
								disableCustomColors={true}
								value={textColorRight.value}
								onChange={setTextColorRight}
							/>
						</PanelColor>

						<PanelColor {...{title: 'Hintergrundfarbe (rechte Spalte)', colorName: backgroundColorRight.name, colorValue: backgroundColorRight.value, initialOpen: false }} >
							<ColorPalette
								colors={backgroundColors}
								disableCustomColors={true}
								value={backgroundColorRight.value}
								onChange={setBackgroundColorRight}
							/>
						</PanelColor>
					</PanelBody>
				</InspectorControls>
			</div>
		);
	}
}

export default registerBlockType('slug/two-columns', {
	title: 'Zwei Spalten',
	icon: 'admin-post',
	category: 'layout',
	attributes: {
		centeredContent: {
			type: 'boolean',
			default: false,
		}
	},
	styles: [
		{ name: 'default', label: '50/50', isDefault: true },
		{ name: 'one-third-two-thirds', label: 'Ein Drittel / Zwei Drittel' },
		{ name: 'two-thirds-one-third', label: 'Zwei Drittel / Ein Drittel' },
	],
	edit: compose([
		withColors({backgroundColorLeft: 'background-color'}, {backgroundColorRight: 'background-color'}, {textColorLeft: 'color'}, {textColorRight: 'color'}),
		FallbackStyles,
	])(TwoColumnBlock),
	save: props => {
		const {
			backgroundColorLeft,
			backgroundColorRight,
			textColorLeft,
			textColorRight,
			centeredContent,
		} = props.attributes;

		const textClassLeft = getColorClass( 'color', textColorLeft );
		const textClassRight = getColorClass( 'color', textColorRight );
		const backgroundClassLeft = getColorClass( 'background-color', backgroundColorLeft );
		const backgroundClassRight = getColorClass( 'background-color', backgroundColorRight );

		const className = classnames( {
			['left-column-' + textClassLeft ]: textClassLeft,
			['right-column-' + textClassRight ]: textClassRight,
			['left-column-' + backgroundClassLeft ]: backgroundClassLeft,
			['right-column-' + backgroundClassRight ]: backgroundClassRight,
			['-centered-content']: centeredContent,
		} );
		return (
			<div className={className}>
				<InnerBlocks.Content/>
			</div>
		);
	},
});