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