← All changes | includes/blocks/image/block.php +67 -11 2.9.1 → 2.14.0 View file →

		@@ -1,9 +1,14 @@
1	1	<?php
2	2	namespace ABlocks\Blocks\Image;
3	3
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
4	8	use ABlocks\Classes\BlockBaseAbstract;
5	9	use ABlocks\Classes\CssGenerator;
	10	+use ABlocks\Classes\CssGeneratorV2;
6	11	use ABlocks\Controls\Alignment;
7	12	use ABlocks\Controls\Border;
8	13	use ABlocks\Controls\Dimensions;
9	14	use ABlocks\Controls\Typography;
		@@ -9,13 +14,14 @@
9	14	use ABlocks\Controls\Typography;
10	15	use ABlocks\Controls\CssFilter;
11	16	use ABlocks\Controls\BoxShadow;
12	17	use ABlocks\Controls\Range;
	18	+use ABlocks\Controls\Color;
13	19
14	20	class Block extends BlockBaseAbstract {
15	21	protected $block_name = 'image';
16	22
17		- public function build_css( $attributes ) {
	23	+ public function build_css_v1( $attributes ) {
18	24
19	25	// Generate CSS
20	26	$css_generator = new CssGenerator( $attributes, $this->block_name );
21	27	// Image Wrapper CSS
		@@ -27,9 +33,9 @@
27	33	);
28	34
29	35	// Image container css
30	36	$css_generator->add_class_styles(
31		- '{{WRAPPER}} .ablocks-block-container',
	37	+ '{{WRAPPER}}',
32	38	$this->get_image_container_css( $attributes ),
33	39	$this->get_image_container_css( $attributes, 'Tablet' ),
34	40	$this->get_image_container_css( $attributes, 'Mobile' ),
35	41	);
		@@ -34,9 +40,9 @@
34	40	$this->get_image_container_css( $attributes, 'Mobile' ),
35	41	);
36	42	// Image css
37	43	$css_generator->add_class_styles(
38		- '{{WRAPPER}} .ablocks-block-container .ablocks-image-figure img',
	44	+ '{{WRAPPER}} .ablocks-image-figure img',
39	45	$this->get_image_css( $attributes ),
40	46	$this->get_image_css( $attributes, 'Tablet' ),
41	47	$this->get_image_css( $attributes, 'Mobile' ),
42	48	);
		@@ -42,31 +48,80 @@
42	48	);
43	49
44	50	// Image hover css
45	51	$css_generator->add_class_styles(
46		- '{{WRAPPER}} .ablocks-block-container .ablocks-image-figure img:hover',
	52	+ '{{WRAPPER}} .ablocks-image-figure img:hover',
47	53	$this->get_image_hover_css( $attributes ),
48	54	$this->get_image_hover_css( $attributes, 'Tablet' ),
49	55	$this->get_image_hover_css( $attributes, 'Mobile' ),
50	56	);
	57	+
	58	+ return $css_generator->generate_css();
	59	+ }
	60	+ public function build_css_v2( $attributes ) {
	61	+
	62	+ // Generate CSS
	63	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	64	+ // Image Wrapper CSS
	65	+ $css_generator->add_class_styles(
	66	+ '{{WRAPPER}}',
	67	+ $this->get_wrapper_css( $attributes ),
	68	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	69	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	70	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
	71	+ );
	72	+
	73	+ // Image container css
	74	+ $css_generator->add_class_styles(
	75	+ '{{WRAPPER}}',
	76	+ $this->get_image_container_css( $attributes ),
	77	+ $this->get_image_container_css( $attributes, 'Tablet' ),
	78	+ $this->get_image_container_css( $attributes, 'Mobile' ),
	79	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_container_css( $attributes, $device ); } )
	80	+ );
	81	+ // Image css
	82	+ $css_generator->add_class_styles(
	83	+ '{{WRAPPER}} .ablocks-image-figure img',
	84	+ $this->get_image_css( $attributes ),
	85	+ $this->get_image_css( $attributes, 'Tablet' ),
	86	+ $this->get_image_css( $attributes, 'Mobile' ),
	87	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_css( $attributes, $device ); } )
	88	+ );
	89	+
	90	+ // Image hover css
	91	+ $css_generator->add_class_styles(
	92	+ '{{WRAPPER}} .ablocks-image-figure img:hover',
	93	+ $this->get_image_hover_css( $attributes ),
	94	+ $this->get_image_hover_css( $attributes, 'Tablet' ),
	95	+ $this->get_image_hover_css( $attributes, 'Mobile' ),
	96	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_hover_css( $attributes, $device ); } )
	97	+ );
51	98	// Image caption css
52	99	$css_generator->add_class_styles(
53		- '{{WRAPPER}} .ablocks-block-container .ablocks-image-figure .ablocks-image-caption',
	100	+ '{{WRAPPER}} .ablocks-image-figure .ablocks-image-caption',
54	101	$this->get_image_caption_css( $attributes ),
55	102	$this->get_image_caption_css( $attributes, 'Tablet' ),
56	103	$this->get_image_caption_css( $attributes, 'Mobile' ),
	104	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_caption_css( $attributes, $device ); } )
57	105	);
58	106
59	107	// Image caption hover css
60	108	$css_generator->add_class_styles(
61		- '{{WRAPPER}} .ablocks-block-container .ablocks-image-figure .ablocks-image-caption:hover',
	109	+ '{{WRAPPER}} .ablocks-image-figure .ablocks-image-caption:hover',
62	110	$this->get_image_caption_hover_css( $attributes ),
63	111	$this->get_image_caption_hover_css( $attributes, 'Tablet' ),
64		- $this->get_image_caption_hover_css( $attributes, 'Mobile' )
	112	+ $this->get_image_caption_hover_css( $attributes, 'Mobile' ),
	113	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_caption_hover_css( $attributes, $device ); } )
65	114	);
66	115
67	116	return $css_generator->generate_css();
68	117	}
	118	+ public function build_css( $attributes ) {
	119	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	120	+ return $this->build_css_v2( $attributes );
	121	+ }
	122	+ return $this->build_css_v1( $attributes );
	123	+ }
69	124
70	125	public function get_wrapper_css( $attributes, $device = '' ) {
71	126	return array_merge(
72	127	isset( $attributes['padding'] ) ? Dimensions::get_css( $attributes['padding'], 'padding', $device ) : [],
		@@ -192,12 +247,13 @@
192	247	public function get_image_caption_css( $attributes, $device = '' ) {
193	248	$css = [];
194	249
195	250	if ( isset( $attributes['captionColor'] ) && ! empty( $attributes['captionColor'] ) ) {
196		- $css['color'] = $attributes['captionColor'];
	251	+ $css['color'] = Color::get_css( isset( $attributes['captionColor'] ) ? $attributes['captionColor'] : '' );
	252	+
197	253	}
198	254	if ( isset( $attributes['captionBackground'] ) && ! empty( $attributes['captionBackground'] ) ) {
199		- $css['background'] = $attributes['captionBackground'];
	255	+ $css['background'] = Color::get_css( isset( $attributes['captionBackground'] ) ? $attributes['captionBackground'] : '' );
200	256	}
201	257	if ( isset( $attributes['captionPosition'] ) && ! empty( $attributes['captionPosition'] && 'overlap' === $attributes['captionPosition'] ) ) {
202	258	$css['width'] = '100%';
203	259	$css['position'] = 'absolute';
		@@ -203,14 +259,14 @@
203	259	$css['position'] = 'absolute';
204	260	$css['bottom'] = 0;
205	261	$css['left'] = 0;
206	262	}
207		-
	263	+ $typographyGlobal = isset( $attributes['captionTypographyGlobal'] ) ? $attributes['captionTypographyGlobal'] : [];
208	264	return array_merge(
209	265	$css,
210	266	( isset( $attributes['captionPadding'] ) ) ? Dimensions::get_css( $attributes['captionPadding'], 'padding', $device ) : [],
211	267	( isset( $attributes['captionAlignment'] ) ) ? Alignment::get_css( $attributes['captionAlignment'], 'text-align', $device ) : [],
212		- ( isset( $attributes['captionTypography'] ) ) ? Typography::get_css( $attributes['captionTypography'], '', $device ) : [],
	268	+ ( isset( $attributes['captionTypography'] ) ) ? Typography::get_css( $attributes['captionTypography'], '', $device, $typographyGlobal ) : [],
213	269	( isset( $attributes['captionBorder'] ) ) ? Border::get_css( $attributes['captionBorder'], '', $device ) : [],
214	270	);
215	271	}
216	272