← All changes | includes/blocks/stripe-button/block.php +142 -33 2.9.1 → 2.14.0 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;
		@@ -13,12 +14,14 @@
13	14	use ABlocks\Controls\Typography;
14	15	use ABlocks\Controls\Dimensions;
15	16	use ABlocks\Controls\TextShadow;
16	17	use ABlocks\Controls\Icon;
	18	+use ABlocks\Controls\Range;
	19	+use ABlocks\Controls\Color;
17	20	class Block extends BlockBaseAbstract {
18	21	protected $block_name = 'stripe-button';
19	22
20		- public function build_css( $attributes ) {
	23	+ public function build_css_v1( $attributes ) {
21	24
22	25	// Generate CSS start
23	26	$css_generator = new CssGenerator( $attributes, $this->block_name );
24	27
		@@ -26,9 +29,10 @@
26	29	$css_generator->add_class_styles(
27	30	'{{WRAPPER}}',
28	31	$this->get_wrapper_css( $attributes ),
29	32	$this->get_wrapper_css( $attributes, 'Tablet' ),
30		- $this->get_wrapper_css( $attributes, 'Mobile' )
	33	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	34	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
31	35	);
32	36	// Generate wrapper CSS end
33	37
34	38	// Generate button CSS start
		@@ -35,9 +39,10 @@
35	39	$css_generator->add_class_styles(
36	40	'{{WRAPPER}} .ablocks-block-container .ablocks-stripe-button',
37	41	$this->get_button_css( $attributes ),
38	42	$this->get_button_css( $attributes, 'Tablet' ),
39		- $this->get_button_css( $attributes, 'Mobile' )
	43	+ $this->get_button_css( $attributes, 'Mobile' ),
	44	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_css( $attributes, $device ); } )
40	45	);
41	46	// Generate button CSS end
42	47
43	48	// Generate button hover CSS start
		@@ -44,9 +49,10 @@
44	49	$css_generator->add_class_styles(
45	50	'{{WRAPPER}} .ablocks-block-container .ablocks-stripe-button:hover',
46	51	$this->get_button_hover_css( $attributes ),
47	52	$this->get_button_hover_css( $attributes, 'Tablet' ),
48		- $this->get_button_hover_css( $attributes, 'Mobile' )
	53	+ $this->get_button_hover_css( $attributes, 'Mobile' ),
	54	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_hover_css( $attributes, $device ); } )
49	55	);
50	56
51	57	// Generate button icon hover CSS
52	58	$css_generator->add_class_styles(
		@@ -52,9 +58,10 @@
52	58	$css_generator->add_class_styles(
53	59	'{{WRAPPER}} .ablocks-block-container .ablocks-stripe-button:hover .ablocks-icon-wrap svg.ablocks-svg-icon',
54	60	$this->get_icon_hover_css( $attributes ),
55	61	$this->get_icon_hover_css( $attributes, 'Tablet' ),
56		- $this->get_icon_hover_css( $attributes, 'Mobile' )
	62	+ $this->get_icon_hover_css( $attributes, 'Mobile' ),
	63	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_icon_hover_css( $attributes, $device ); } )
57	64	);
58	65
59	66	// Generate button text CSS start
60	67	$css_generator->add_class_styles(
		@@ -66,10 +73,18 @@
66	73	$css_generator->add_class_styles(
67	74	'{{WRAPPER}} .ablocks-icon-wrap',
68	75	Icon::get_wrapper_css( $attributes ),
69	76	Icon::get_wrapper_css( $attributes, 'Tablet' ),
70		- Icon::get_wrapper_css( $attributes, 'Mobile' )
	77	+ Icon::get_wrapper_css( $attributes, 'Mobile' ),
	78	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
71	79	);
	80	+ $css_generator->add_class_styles(
	81	+ '{{WRAPPER}} .ablocks-icon-wrap:hover',
	82	+ Icon::get_wrapper_hover_css( $attributes ),
	83	+ Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
	84	+ Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
	85	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
	86	+ );
72	87
73	88	$css_generator->add_class_styles(
74	89	'{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
75	90	Icon::get_element_image_css( $attributes ),
		@@ -97,8 +112,112 @@
97	112
98	113	return $css_generator->generate_css();
99	114	}
100	115
	116	+ public function build_css_v2( $attributes ) {
	117	+
	118	+ // Generate CSS start
	119	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	120	+
	121	+ // Generate wrapper CSS start
	122	+ $css_generator->add_class_styles(
	123	+ '{{WRAPPER}}',
	124	+ $this->get_wrapper_css( $attributes ),
	125	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	126	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	127	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
	128	+ );
	129	+ // Generate wrapper CSS end
	130	+
	131	+ // Generate button CSS start
	132	+ $css_generator->add_class_styles(
	133	+ '{{WRAPPER}} .ablocks-stripe-button',
	134	+ $this->get_button_css( $attributes ),
	135	+ $this->get_button_css( $attributes, 'Tablet' ),
	136	+ $this->get_button_css( $attributes, 'Mobile' ),
	137	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_css( $attributes, $device ); } )
	138	+ );
	139	+ // Generate button CSS end
	140	+
	141	+ // Generate button hover CSS start
	142	+ $css_generator->add_class_styles(
	143	+ '{{WRAPPER}} .ablocks-stripe-button:hover',
	144	+ $this->get_button_hover_css( $attributes ),
	145	+ $this->get_button_hover_css( $attributes, 'Tablet' ),
	146	+ $this->get_button_hover_css( $attributes, 'Mobile' ),
	147	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_hover_css( $attributes, $device ); } )
	148	+ );
	149	+
	150	+ // Generate button icon hover CSS
	151	+ $css_generator->add_class_styles(
	152	+ '{{WRAPPER}} .ablocks-stripe-button:hover .ablocks-icon-wrap svg.ablocks-svg-icon',
	153	+ $this->get_icon_hover_css( $attributes ),
	154	+ $this->get_icon_hover_css( $attributes, 'Tablet' ),
	155	+ $this->get_icon_hover_css( $attributes, 'Mobile' ),
	156	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_icon_hover_css( $attributes, $device ); } )
	157	+ );
	158	+
	159	+ // Generate button text CSS start
	160	+ $css_generator->add_class_styles(
	161	+ '{{WRAPPER}} .ablocks-stripe-button .ablocks-stripe-button__text',
	162	+ $this->get_button_text_css( $attributes )
	163	+ );
	164	+
	165	+ // Generate button icon CSS start
	166	+ $css_generator->add_class_styles(
	167	+ '{{WRAPPER}} .ablocks-icon-wrap',
	168	+ Icon::get_wrapper_css( $attributes ),
	169	+ Icon::get_wrapper_css( $attributes, 'Tablet' ),
	170	+ Icon::get_wrapper_css( $attributes, 'Mobile' ),
	171	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
	172	+ );
	173	+ $css_generator->add_class_styles(
	174	+ '{{WRAPPER}} .ablocks-icon-wrap:hover',
	175	+ Icon::get_wrapper_hover_css( $attributes ),
	176	+ Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
	177	+ Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
	178	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
	179	+ );
	180	+
	181	+ $css_generator->add_class_styles(
	182	+ '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
	183	+ Icon::get_element_image_css( $attributes ),
	184	+ Icon::get_element_image_css( $attributes, 'Tablet' ),
	185	+ Icon::get_element_image_css( $attributes, 'Mobile' ),
	186	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_css( $attributes, $device ); } )
	187	+ );
	188	+ $css_generator->add_class_styles(
	189	+ '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon:hover',
	190	+ Icon::get_element_image_hover_css( $attributes ),
	191	+ Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
	192	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	193	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
	194	+ );
	195	+ $css_generator->add_class_styles(
	196	+ '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon',
	197	+ Icon::get_element_css( $attributes ),
	198	+ Icon::get_element_css( $attributes, 'Tablet' ),
	199	+ Icon::get_element_css( $attributes, 'Mobile' ),
	200	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_css( $attributes, $device ); } )
	201	+ );
	202	+ $css_generator->add_class_styles(
	203	+ '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon:hover',
	204	+ Icon::get_element_image_hover_css( $attributes ),
	205	+ Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
	206	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	207	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
	208	+ );
	209	+
	210	+ return $css_generator->generate_css();
	211	+ }
	212	+
	213	+ public function build_css( $attributes ) {
	214	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	215	+ return $this->build_css_v2( $attributes );
	216	+ }
	217	+ return $this->build_css_v1( $attributes );
	218	+ }
	219	+
101	220	public function get_wrapper_css( $attributes, $device = '' ) {
102	221	$css = [];
103	222	$position = isset( $attributes['position'][ 'value' . $device ] ) && $attributes['position'][ 'value' . $device ] !== 'stretch';
104	223
		@@ -112,9 +231,9 @@
112	231	public function get_button_css( $attributes, $device = '' ) {
113	232	$css = [];
114	233
115	234	if ( ! empty( $attributes['background'] ) ) {
116		- $css['background'] = $attributes['background'];
	235	+ $css['background'] = Color::get_css( isset( $attributes['background'] ) ? $attributes['background'] : '' );
117	236	} else {
118	237	$css['background'] = $attributes['buttonType'];
119	238	}
120	239
		@@ -124,23 +243,25 @@
124	243
125	244	if ( isset( $attributes['position'][ 'value' . $device ] ) && $attributes['position'][ 'value' . $device ] === 'stretch' ) {
126	245	$css['width'] = '100%';
127	246	}
128		-
129		- $defaultUnit = 'px';
130		-
131		- $unit = ! empty( $attributes['iconSpace'][ 'valueUnit' . $device ] ) ? $attributes['iconSpace'][ 'valueUnit' . $device ] : $defaultUnit;
132		-
133		- if ( ! empty( $attributes['iconSpace'][ 'value' . $device ] ) ) {
134		- $css['column-gap'] = $attributes['iconSpace'][ 'value' . $device ] . $unit;
135		- }
136		-
	247	+ $typographyValueGlobal = ! empty( $attributes['typographyGlobal'] ) ? $attributes['typographyGlobal'] : array();
137	248	return array_merge(
138	249	$css,
139		- [ 'color' => $attributes['textColor'] ?? '#000000' ],
	250	+ [ 'color' => Color::get_css( isset( $attributes['textColor'] ) ? $attributes['textColor'] : '' ) ],
	251	+ Range::get_css([
	252	+ 'attributeValue' => $attributes['iconSpace'],
	253	+ 'attribute_object_key' => 'value',
	254	+ 'isResponsive' => true,
	255	+ 'defaultValue' => 10,
	256	+ 'hasUnit' => true,
	257	+ 'unitDefaultValue' => 'px',
	258	+ 'property' => 'column-gap',
	259	+ 'device' => $device,
	260	+ ]),
140	261	Border::get_css( $attributes['border'], '', $device ),
141	262	BoxShadow::get_css( $attributes['boxShadow'], '', $device ),
142		- Typography::get_css( $attributes['typography'], '', $device ),
	263	+ Typography::get_css( $attributes['typography'], '', $device, $typographyValueGlobal ),
143	264	Dimensions::get_css( $attributes['padding'], 'padding', $device ),
144	265	);
145	266	}
146	267
		@@ -145,21 +266,15 @@
145	266	}
146	267
147	268	public function get_button_hover_css( $attributes, $device = '' ) {
148	269	$css = [];
149		- if ( ! empty( $attributes['textColorH'] ) ) {
150		- $css['color'] = $attributes['textColorH'];
151		- }
152		-
153		- if ( ! empty( $attributes['backgroundH'] ) ) {
154		- $css['background'] = $attributes['backgroundH'];
155		- }
156		-
157	270	if ( ! empty( $attributes['transition'] ) ) {
158	271	$css['transition-duration'] = $attributes['transition'] . 's';
159	272	}
160	273	return array_merge(
161	274	$css,
	275	+ [ 'color' => Color::get_css( isset( $attributes['textColorH'] ) ? $attributes['textColorH'] : '' ) ],
	276	+ [ 'background' => Color::get_css( isset( $attributes['backgroundH'] ) ? $attributes['backgroundH'] : '' ) ],
162	277	Border::get_hover_css( $attributes['border'], '', $device ),
163	278	BoxShadow::get_hover_css( $attributes['boxShadow'], '', $device )
164	279	);
165	280	}
		@@ -168,15 +283,9 @@
168	283	return TextShadow::get_css( $attributes['textShadow'] );
169	284	}
170	285
171	286	public function get_icon_hover_css( $attributes, $device = '' ) {
172		- $css = [];
173		-
174		- if ( ! empty( $attributes['textColorH'] ) ) {
175		- $css['fill'] = $attributes['textColorH'];
176		- }
177		-
178		- return $css;
	287	+ return [ 'color' => Color::get_css( isset( $attributes['textColorH'] ) ? $attributes['textColorH'] : '' ) ];
179	288	}
180	289
181	290
182	291	}