1 |
|
2 |
|
3 |
|
4 | import classnames from 'classnames';
|
5 | import { omit, pick } from 'lodash';
|
6 |
|
7 |
|
8 |
|
9 |
|
10 | import { G, Path, SVG } from '@wordpress/components';
|
11 | import { __, _x } from '@wordpress/i18n';
|
12 | import {
|
13 | RichText,
|
14 | getColorClassName,
|
15 | } from '@wordpress/block-editor';
|
16 |
|
17 |
|
18 |
|
19 |
|
20 | import edit from './edit';
|
21 |
|
22 | const blockAttributes = {
|
23 | url: {
|
24 | type: 'string',
|
25 | source: 'attribute',
|
26 | selector: 'a',
|
27 | attribute: 'href',
|
28 | },
|
29 | title: {
|
30 | type: 'string',
|
31 | source: 'attribute',
|
32 | selector: 'a',
|
33 | attribute: 'title',
|
34 | },
|
35 | text: {
|
36 | type: 'string',
|
37 | source: 'html',
|
38 | selector: 'a',
|
39 | },
|
40 | backgroundColor: {
|
41 | type: 'string',
|
42 | },
|
43 | textColor: {
|
44 | type: 'string',
|
45 | },
|
46 | customBackgroundColor: {
|
47 | type: 'string',
|
48 | },
|
49 | customTextColor: {
|
50 | type: 'string',
|
51 | },
|
52 | };
|
53 |
|
54 | export const name = 'core/button';
|
55 |
|
56 | const colorsMigration = ( attributes ) => {
|
57 | return omit( {
|
58 | ...attributes,
|
59 | customTextColor: attributes.textColor && '#' === attributes.textColor[ 0 ] ? attributes.textColor : undefined,
|
60 | customBackgroundColor: attributes.color && '#' === attributes.color[ 0 ] ? attributes.color : undefined,
|
61 | }, [ 'color', 'textColor' ] );
|
62 | };
|
63 |
|
64 | export const settings = {
|
65 | title: __( 'Button' ),
|
66 |
|
67 | description: __( 'Prompt visitors to take action with a button-style link.' ),
|
68 |
|
69 | icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M19 6H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H5V8h14v8z" /></G></SVG>,
|
70 |
|
71 | category: 'layout',
|
72 |
|
73 | keywords: [ __( 'link' ) ],
|
74 |
|
75 | attributes: blockAttributes,
|
76 |
|
77 | supports: {
|
78 | align: true,
|
79 | alignWide: false,
|
80 | },
|
81 |
|
82 | styles: [
|
83 | { name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
|
84 | { name: 'outline', label: __( 'Outline' ) },
|
85 | { name: 'squared', label: _x( 'Squared', 'block style' ) },
|
86 | ],
|
87 |
|
88 | edit,
|
89 |
|
90 | save( { attributes } ) {
|
91 | const {
|
92 | url,
|
93 | text,
|
94 | title,
|
95 | backgroundColor,
|
96 | textColor,
|
97 | customBackgroundColor,
|
98 | customTextColor,
|
99 | } = attributes;
|
100 |
|
101 | const textClass = getColorClassName( 'color', textColor );
|
102 | const backgroundClass = getColorClassName( 'background-color', backgroundColor );
|
103 |
|
104 | const buttonClasses = classnames( 'wp-block-button__link', {
|
105 | 'has-text-color': textColor || customTextColor,
|
106 | [ textClass ]: textClass,
|
107 | 'has-background': backgroundColor || customBackgroundColor,
|
108 | [ backgroundClass ]: backgroundClass,
|
109 | } );
|
110 |
|
111 | const buttonStyle = {
|
112 | backgroundColor: backgroundClass ? undefined : customBackgroundColor,
|
113 | color: textClass ? undefined : customTextColor,
|
114 | };
|
115 |
|
116 | return (
|
117 | <div>
|
118 | <RichText.Content
|
119 | tagName="a"
|
120 | className={ buttonClasses }
|
121 | href={ url }
|
122 | title={ title }
|
123 | style={ buttonStyle }
|
124 | value={ text }
|
125 | />
|
126 | </div>
|
127 | );
|
128 | },
|
129 |
|
130 | deprecated: [ {
|
131 | attributes: {
|
132 | ...pick( blockAttributes, [ 'url', 'title', 'text' ] ),
|
133 | color: {
|
134 | type: 'string',
|
135 | },
|
136 | textColor: {
|
137 | type: 'string',
|
138 | },
|
139 | align: {
|
140 | type: 'string',
|
141 | default: 'none',
|
142 | },
|
143 | },
|
144 |
|
145 | save( { attributes } ) {
|
146 | const { url, text, title, align, color, textColor } = attributes;
|
147 |
|
148 | const buttonStyle = {
|
149 | backgroundColor: color,
|
150 | color: textColor,
|
151 | };
|
152 |
|
153 | const linkClass = 'wp-block-button__link';
|
154 |
|
155 | return (
|
156 | <div className={ `align${ align }` }>
|
157 | <RichText.Content
|
158 | tagName="a"
|
159 | className={ linkClass }
|
160 | href={ url }
|
161 | title={ title }
|
162 | style={ buttonStyle }
|
163 | value={ text }
|
164 | />
|
165 | </div>
|
166 | );
|
167 | },
|
168 | migrate: colorsMigration,
|
169 | },
|
170 | {
|
171 | attributes: {
|
172 | ...pick( blockAttributes, [ 'url', 'title', 'text' ] ),
|
173 | color: {
|
174 | type: 'string',
|
175 | },
|
176 | textColor: {
|
177 | type: 'string',
|
178 | },
|
179 | align: {
|
180 | type: 'string',
|
181 | default: 'none',
|
182 | },
|
183 | },
|
184 |
|
185 | save( { attributes } ) {
|
186 | const { url, text, title, align, color, textColor } = attributes;
|
187 |
|
188 | return (
|
189 | <div className={ `align${ align }` } style={ { backgroundColor: color } }>
|
190 | <RichText.Content
|
191 | tagName="a"
|
192 | href={ url }
|
193 | title={ title }
|
194 | style={ { color: textColor } }
|
195 | value={ text }
|
196 | />
|
197 | </div>
|
198 | );
|
199 | },
|
200 | migrate: colorsMigration,
|
201 | },
|
202 | ],
|
203 | };
|