← All changes | includes/blocks/button/block.php +111 -27 2.9.1 → 2.13.1 View file →

		@@ -6,8 +6,9 @@
6	6	}
7	7
8	8	use ABlocks\Classes\BlockBaseAbstract;
9	9	use ABlocks\Classes\CssGenerator;
	10	+use ABlocks\Classes\CssGeneratorV2;
10	11	use ABlocks\Controls\Alignment;
11	12	use ABlocks\Controls\Border;
12	13	use ABlocks\Controls\BoxShadow;
13	14	use ABlocks\Controls\Typography;
		@@ -14,18 +15,15 @@
14	15	use ABlocks\Controls\Dimensions;
15	16	use ABlocks\Controls\TextShadow;
16	17	use ABlocks\Controls\Icon;
17	18	use ABlocks\Controls\Range;
	19	+use ABlocks\Controls\Color;
18	20
19	21	class Block extends BlockBaseAbstract {
20	22	protected $block_name = 'button';
21		-
22		- public function build_css( $attributes ) {
23		-
24		- // Generate CSS start
	23	+ public function build_css_v1( $attributes ) {
25	24	$css_generator = new CssGenerator( $attributes, $this->block_name );
26	25
27		- // Generate wrapper CSS start
28	26	$css_generator->add_class_styles(
29	27	'{{WRAPPER}}',
30	28	$this->get_wrapper_css( $attributes ),
31	29	$this->get_wrapper_css( $attributes, 'Tablet' ),
		@@ -70,8 +68,14 @@
70	68	Icon::get_wrapper_css( $attributes ),
71	69	Icon::get_wrapper_css( $attributes, 'Tablet' ),
72	70	Icon::get_wrapper_css( $attributes, 'Mobile' )
73	71	);
	72	+ $css_generator->add_class_styles(
	73	+ '{{WRAPPER}} .ablocks-icon-wrap:hover',
	74	+ Icon::get_wrapper_hover_css( $attributes ),
	75	+ Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
	76	+ Icon::get_wrapper_hover_css( $attributes, 'Mobile' )
	77	+ );
74	78
75	79	$css_generator->add_class_styles(
76	80	'{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
77	81	Icon::get_element_image_css( $attributes ),
		@@ -98,9 +102,97 @@
98	102	);
99	103
100	104	return $css_generator->generate_css();
101	105	}
	106	+ public function build_css_v2( $attributes ) {
	107	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
102	108
	109	+ $css_generator->add_class_styles(
	110	+ '{{WRAPPER}}',
	111	+ $this->get_wrapper_css( $attributes ),
	112	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	113	+ $this->get_wrapper_css( $attributes, 'Mobile' )
	114	+ );
	115	+ // Generate wrapper CSS end
	116	+
	117	+ // Generate button CSS start
	118	+ $css_generator->add_class_styles(
	119	+ '{{WRAPPER}} .ablocks-button',
	120	+ $this->get_button_css( $attributes ),
	121	+ $this->get_button_css( $attributes, 'Tablet' ),
	122	+ $this->get_button_css( $attributes, 'Mobile' )
	123	+ );
	124	+
	125	+ // Generate button hover CSS start
	126	+ $css_generator->add_class_styles(
	127	+ '{{WRAPPER}} .ablocks-button:hover',
	128	+ $this->get_button_hover_css( $attributes ),
	129	+ $this->get_button_hover_css( $attributes, 'Tablet' ),
	130	+ $this->get_button_hover_css( $attributes, 'Mobile' )
	131	+ );
	132	+
	133	+ // Generate button icon hover CSS
	134	+ $css_generator->add_class_styles(
	135	+ '{{WRAPPER}} .ablocks-button:hover .ablocks-icon-wrap svg.ablocks-svg-icon',
	136	+ $this->get_icon_hover_css( $attributes ),
	137	+ $this->get_icon_hover_css( $attributes, 'Tablet' ),
	138	+ $this->get_icon_hover_css( $attributes, 'Mobile' )
	139	+ );
	140	+
	141	+ // Generate button text CSS start
	142	+ $css_generator->add_class_styles(
	143	+ '{{WRAPPER}} .ablocks-button .ablocks-button__text',
	144	+ $this->get_button_text_css( $attributes )
	145	+ );
	146	+
	147	+ // Generate button icon CSS start
	148	+ $css_generator->add_class_styles(
	149	+ '{{WRAPPER}} .ablocks-icon-wrap',
	150	+ Icon::get_wrapper_css( $attributes ),
	151	+ Icon::get_wrapper_css( $attributes, 'Tablet' ),
	152	+ Icon::get_wrapper_css( $attributes, 'Mobile' )
	153	+ );
	154	+ $css_generator->add_class_styles(
	155	+ '{{WRAPPER}} .ablocks-icon-wrap:hover',
	156	+ Icon::get_wrapper_hover_css( $attributes ),
	157	+ Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
	158	+ Icon::get_wrapper_hover_css( $attributes, 'Mobile' )
	159	+ );
	160	+
	161	+ $css_generator->add_class_styles(
	162	+ '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
	163	+ Icon::get_element_image_css( $attributes ),
	164	+ Icon::get_element_image_css( $attributes, 'Tablet' ),
	165	+ Icon::get_element_image_css( $attributes, 'Mobile' )
	166	+ );
	167	+ $css_generator->add_class_styles(
	168	+ '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon:hover',
	169	+ Icon::get_element_image_hover_css( $attributes ),
	170	+ Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
	171	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	172	+ );
	173	+ $css_generator->add_class_styles(
	174	+ '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon',
	175	+ Icon::get_element_css( $attributes ),
	176	+ Icon::get_element_css( $attributes, 'Tablet' ),
	177	+ Icon::get_element_css( $attributes, 'Mobile' )
	178	+ );
	179	+ $css_generator->add_class_styles(
	180	+ '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon:hover',
	181	+ Icon::get_element_image_hover_css( $attributes ),
	182	+ Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
	183	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' )
	184	+ );
	185	+
	186	+ return $css_generator->generate_css();
	187	+ }
	188	+ public function build_css( $attributes ) {
	189	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	190	+ return $this->build_css_v2( $attributes );
	191	+ }
	192	+ return $this->build_css_v1( $attributes );
	193	+ }
	194	+
103	195	public function get_wrapper_css( $attributes, $device = '' ) {
104	196	$css = [];
105	197	$position = isset( $attributes['position'][ 'value' . $device ] ) && $attributes['position'][ 'value' . $device ] !== 'stretch';
106	198
		@@ -112,12 +204,16 @@
112	204	}
113	205
114	206	public function get_button_css( $attributes, $device = '' ) {
115	207	$css = [];
116		-
117		- if ( ! empty( $attributes['background'] ) ) {
118		- $css['background'] = $attributes['background'];
119		- } else {
	208	+ if ( ! empty( $attributes['buttonType'] ) && $attributes['buttonType'] === 'link' ) {
	209	+ $css['background'] = 'none';
	210	+ $css['padding'] = '0';
	211	+ $css['cursor'] = 'pointer';
	212	+ } elseif ( ! empty( $attributes['background'] ) ) {
	213	+ $css['background'] = Color::get_css(
	214	+ isset( $attributes['background'] ) ? $attributes['background'] : '');
	215	+ } elseif ( ! empty( $attributes['buttonType'] ) ) {
120	216	$css['background'] = $attributes['buttonType'];
121	217	}
122	218
123	219	if ( isset( $attributes['alignment'][ 'value' . $device ] ) ) {
		@@ -126,9 +222,9 @@
126	222
127	223	if ( isset( $attributes['position'][ 'value' . $device ] ) && $attributes['position'][ 'value' . $device ] === 'stretch' ) {
128	224	$css['width'] = '100%';
129	225	}
130		-
	226	+ $typographyValueGlobal = ! empty( $attributes['typographyGlobal'] ) ? $attributes['typographyGlobal'] : '';
131	227	return array_merge(
132	228	Range::get_css([
133	229	'attributeValue' => $attributes['iconSpace'],
134	230	'attribute_object_key' => 'value',
		@@ -139,12 +235,12 @@
139	235	'property' => 'column-gap',
140	236	'device' => $device,
141	237	]),
142	238	$css,
143		- [ 'color' => $attributes['textColor'] ?? '#000000' ],
	239	+ [ 'color' => Color::get_css( isset( $attributes['textColor'] ) ? $attributes['textColor'] : '' ) ],
144	240	Border::get_css( $attributes['border'], '', $device ),
145	241	BoxShadow::get_css( $attributes['boxShadow'], '', $device ),
146		- Typography::get_css( $attributes['typography'], '', $device ),
	242	+ Typography::get_css( $attributes['typography'], '', $device, $typographyValueGlobal ),
147	243	Dimensions::get_css( $attributes['padding'], 'padding', $device ),
148	244	);
149	245	}
150	246
		@@ -149,16 +245,8 @@
149	245	}
150	246
151	247	public function get_button_hover_css( $attributes, $device = '' ) {
152	248	$css = [];
153		- if ( ! empty( $attributes['textColorH'] ) ) {
154		- $css['color'] = $attributes['textColorH'];
155		- }
156		-
157		- if ( ! empty( $attributes['backgroundH'] ) ) {
158		- $css['background'] = $attributes['backgroundH'];
159		- }
160		-
161	249	return array_merge(
162	250	Range::get_css([
163	251	'attributeValue' => $attributes['transition'],
164	252	'attribute_object_key' => 'value',
		@@ -167,8 +255,10 @@
167	255	'property' => 'transition-duration',
168	256	'device' => $device,
169	257	]),
170	258	$css,
	259	+ [ 'color' => Color::get_css( isset( $attributes['textColorH'] ) ? $attributes['textColorH'] : '' ) ],
	260	+ [ 'background' => Color::get_css( isset( $attributes['backgroundH'] ) ? $attributes['backgroundH'] : '' ) ],
171	261	Border::get_hover_css( $attributes['border'], '', $device ),
172	262	BoxShadow::get_hover_css( $attributes['boxShadow'], '', $device )
173	263	);
174	264	}
		@@ -177,15 +267,9 @@
177	267	return TextShadow::get_css( $attributes['textShadow'] );
178	268	}
179	269
180	270	public function get_icon_hover_css( $attributes, $device = '' ) {
181		- $css = [];
182		-
183		- if ( ! empty( $attributes['textColorH'] ) ) {
184		- $css['fill'] = $attributes['textColorH'];
185		- }
186		-
187		- return $css;
	271	+ return [ 'fill' => Color::get_css( isset( $attributes['textColorH'] ) ? $attributes['textColorH'] : '' ) ];
188	272	}
189	273
190	274
191	275	}