Skip to content

Instantly share code, notes, and snippets.

@yhira
Created October 17, 2019 18:11
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save yhira/a740a1db00e7d5b1224c1994b648149d to your computer and use it in GitHub Desktop.
withColorsを使ったサンプル
import classnames from 'classnames';
const {
registerBlockType,
} = wp.blocks;
const {
InspectorControls,
RichText,
withColors,
getColorClassName,
PanelColorSettings
} = wp.editor;
const {
PanelBody,
withFallbackStyles,
PanelColor,
ColorPalette,
} = wp.components;
const {
Component,
} = wp.element;
const {
compose
} = wp.compose;
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,
};
});
class OneColumnBlock extends Component {
constructor() {
super(...arguments);
}
render() {
const {
attributes,
setAttributes,
mergeBlocks,
onReplace,
className,
backgroundColor,
textColor,
setBackgroundColor,
setTextColor,
fallbackBackgroundColor,
fallbackTextColor,
fallbackFontSize,
} = this.props;
console.log(backgroundColor);
console.log(textColor);
const {
align,
content,
dropCap,
placeholder,
} = attributes;
const textColors = [
{
name: 'Tundora',
slug: 'tundora',
color: '#454545'
},
];
const backgroundColors = [
{
name: 'Puerto Rico',
slug: 'puerto-rico',
color: '#53c4ab'
},
{
name: 'Butterfly Bush',
slug: 'butterfly-bush',
color: '#5151a0'
},
{
name: 'White',
slug: 'white',
color: '#ffffff'
}
];
return (
<div
className={classnames(className, {
'has-background': backgroundColor.color,
[backgroundColor.class]: backgroundColor.class,
[textColor.class]: textColor.class,
})}
style={{
backgroundColor: backgroundColor.color,
color: textColor.color,
}}
>
<RichText
value={ content }
/>
<InspectorControls>
<PanelColorSettings
title="'Farbschema"
colorSettings={[
{
colors: textColors,
label: 'Textfarbe',
onChange: setTextColor,
value: textColor.color,
disableCustomColors: true,
},
{
colors: backgroundColors,
label: 'Hintergrundfarbe',
onChange: setBackgroundColor,
value: backgroundColor.color,
disableCustomColors: true,
}
]}
/>
</InspectorControls>
</div>
);
}
}
export default registerBlockType('slug/one-column', {
title: 'Eine Spalte',
icon: 'admin-post',
category: 'layout',
attributes: {
content: {
type: 'string',
},
backgroundColor: {
type: 'string',
},
textColor: {
type: 'string',
},
},
edit: compose([
withColors('backgroundColor', {textColor: 'color'}),
FallbackStyles,
])(OneColumnBlock),
save: props => {
const {
content,
backgroundColor,
textColor,
customBackgroundColor,
customTextColor,
} = props.attributes;
const textClass = getColorClassName( 'color', textColor );
const backgroundClass = getColorClassName( 'background-color', backgroundColor );
const className = classnames( {
'has-background': backgroundColor || customBackgroundColor,
[ textClass ]: textClass,
[ backgroundClass ]: backgroundClass,
} );
return (
<div className={className}>
<RichText.Content
value={ content }
/>
</div>
);
},
});
@yhira
Copy link
Author

yhira commented Oct 18, 2019

これだと、カラーパレットの色を選択したとき、クラスなどがオブジェクトに反映されなかった。
修正版はこちら。
https://gist.github.com/yhira/048af61215f2c0d2df66238fad724ff8
原因は、カスタムカラーを設定したため。
詳しくはこちら。
https://wp-cocoon.com/community/cocoon-blocks-all/%e3%82%ab%e3%83%a9%e3%83%bc%e3%83%91%e3%83%ac%e3%83%83%e3%83%88%e3%81%a7%e3%81%ae%e8%a8%ad%e5%ae%9a%e5%80%a4%e3%81%ae%e6%89%b1%e3%81%84%e6%96%b9%e3%81%ab%e3%82%88%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-23351

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment