Skip to content

Instantly share code, notes, and snippets.

@florianbrinkmann
Created July 12, 2018 09:18
Show Gist options
  • Save florianbrinkmann/28564f30cbf559ab858c4be548f98704 to your computer and use it in GitHub Desktop.
Save florianbrinkmann/28564f30cbf559ab858c4be548f98704 to your computer and use it in GitHub Desktop.
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>
);
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment