wp-theme/blocks/bullet/edit.js at aec37e596135bee38b0187924f4178bbcd9dc787 · silverbackstudio/wp-theme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/* global wp */
/* global lodash */

const { Fragment, Component } = wp.element;
/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
const { __ } = wp.i18n; // Import __() from wp.i18n
const {
	RichText,
	InspectorControls,
	BlockControls,
	ContrastChecker,
	PanelColorSettings,
	AlignmentToolbar,
	withColors,
} = wp.blockEditor;

const { compose } = wp.compose;

import IconEditor from '../icon/editor';
import { HeadingToolbar } from '../common/heading';

class BulletEdit extends Component {

    render() {

		const {
			attributes,
			setAttributes,
			className,
			isSelected,
			backgroundColor,
			textColor,
			setBackgroundColor,
			setTextColor,
		} = this.props;

		const {
		    align,
			title,
			titleLevel,
			content,
		} = attributes;

		const classNames = classnames( className, {
			'is-selected': isSelected,
			[ backgroundColor.class ]: backgroundColor.class,
			[ textColor.class ]: textColor.class,
		} );

		const style = {
			backgroundColor: backgroundColor.color,
			color: textColor.color,
			textAlign: align,
		};

        const titleTag = titleLevel ? ( 'h' + titleLevel ) : 'h2';

		return (
			<Fragment>
				<div className={ classNames } >
				    <IconEditor { ...this.props }  />
				    <div style={ style }>
						<RichText
	    			    	tagName={ titleTag }
							value={ title }
							onChange={ ( value ) => setAttributes( { title: value } ) }
							placeholder={ __( 'This is my title..', '_svbk' ) }
							className={ 'wp-block-svbk-bullet__title' }
						/>
						<RichText
							tagName={ 'div' }
							value={ content }
							onChange={ ( value ) => setAttributes( { content: value } ) }
							placeholder={ __( 'Content..', '_svbk' ) }
							className={ 'wp-block-svbk-bullet__content' }
						/>
					</div>
				</div>
                <BlockControls>
                    <HeadingToolbar
                    	minLevel={ 2 }
                    	maxLevel={ 5 }
                    	selectedLevel={ titleLevel }
                    	onChange={ ( newLevel ) => { setAttributes( { titleLevel: newLevel } ) } }
                    />
					<AlignmentToolbar
						value={ align }
						onChange={ ( nextAlign ) => {
							setAttributes( { align: nextAlign } );
						} }
					/>
				</BlockControls>
				<InspectorControls>
					<PanelColorSettings
						title={ __( 'Color Settings', '_svbk' ) }
						initialOpen={ false }
                        colorSettings={ [
							{
								value: backgroundColor.color,
								onChange: setBackgroundColor,
								label: __( 'Background Color', '_svbk' ),
							},
							{
								value: textColor.color,
								onChange: setTextColor,
								label: __( 'Text Color', '_svbk' ),
							},
						] }
					/>
					<ContrastChecker
						{ ...{
							textColor: textColor.color,
							backgroundColor: backgroundColor.color,
						} }
					/>
				</InspectorControls>
			</Fragment>
		);
	}

}

export default compose( [
	withColors( 'backgroundColor', { textColor: 'color' } ),
] )( BulletEdit );