Merge branch 'master' of https://github.com/stellarwp/kadence-blocks

stellarwp · Jun 12, 2024 · 946e42f · 946e42f
2 parents d77bd9e + d9e91c6
commit 946e42f
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 43 deletions.
diff --git a/includes/blocks/class-kadence-blocks-image-block.php b/includes/blocks/class-kadence-blocks-image-block.php
@@ -243,6 +243,11 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 			}
 		}
 
+		// Object position
+		if ( isset( $attributes['imagePosition'] ) && $attributes['imagePosition'] ) {
+			$css->add_property( 'object-position', $attributes['imagePosition'] );
+		}
+
 		// Caption Font
 		if ( ! isset( $attributes['showCaption'] ) && isset( $attributes['captionStyles'] ) && is_array( $attributes['captionStyles'] ) && is_array( $attributes['captionStyles'][0] ) ) {
 			$caption_font = $attributes['captionStyles'][0];

diff --git a/src/blocks/image/block.json b/src/blocks/image/block.json
@@ -332,6 +332,10 @@
 		},
 		"overlayBlendMode": {
 			"type": "string"
+		},
+		"imagePosition": {
+			"type": "string",
+			"default": ""
 		}
 	},
 	"supports": {

diff --git a/src/blocks/image/image.js b/src/blocks/image/image.js
@@ -95,6 +95,7 @@ import {
 	CopyPasteAttributes,
 	GradientControl,
 	BackgroundTypeControl,
+	KadenceFocalPicker,
 } from '@kadence/components';
 
 export default function Image({
@@ -178,6 +179,7 @@ export default function Image({
 		overlayOpacity,
 		overlayBlendMode,
 		globalAlt,
+		imagePosition,
 	} = attributes;
 
 	const previewURL = dynamicURL ? dynamicURL : url;
@@ -660,49 +662,57 @@ export default function Image({
 								onChange={(value) => setAttributes({ useRatio: value })}
 							/>
 							{useRatio && (
-								<SelectControl
-									label={__('Size Ratio', 'kadence-blocks')}
-									value={ratio}
-									options={[
-										{
-											label: __('Landscape 4:3', 'kadence-blocks'),
-											value: 'land43',
-										},
-										{
-											label: __('Landscape 3:2', 'kadence-blocks'),
-											value: 'land32',
-										},
-										{
-											label: __('Landscape 16:9', 'kadence-blocks'),
-											value: 'land169',
-										},
-										{
-											label: __('Landscape 2:1', 'kadence-blocks'),
-											value: 'land21',
-										},
-										{
-											label: __('Landscape 3:1', 'kadence-blocks'),
-											value: 'land31',
-										},
-										{
-											label: __('Landscape 4:1', 'kadence-blocks'),
-											value: 'land41',
-										},
-										{
-											label: __('Portrait 3:4', 'kadence-blocks'),
-											value: 'port34',
-										},
-										{
-											label: __('Portrait 2:3', 'kadence-blocks'),
-											value: 'port23',
-										},
-										{
-											label: __('Square 1:1', 'kadence-blocks'),
-											value: 'square',
-										},
-									]}
-									onChange={(value) => setAttributes({ ratio: value })}
-								/>
+								<>
+									<SelectControl
+										label={__('Size Ratio', 'kadence-blocks')}
+										value={ratio}
+										options={[
+											{
+												label: __('Landscape 4:3', 'kadence-blocks'),
+												value: 'land43',
+											},
+											{
+												label: __('Landscape 3:2', 'kadence-blocks'),
+												value: 'land32',
+											},
+											{
+												label: __('Landscape 16:9', 'kadence-blocks'),
+												value: 'land169',
+											},
+											{
+												label: __('Landscape 2:1', 'kadence-blocks'),
+												value: 'land21',
+											},
+											{
+												label: __('Landscape 3:1', 'kadence-blocks'),
+												value: 'land31',
+											},
+											{
+												label: __('Landscape 4:1', 'kadence-blocks'),
+												value: 'land41',
+											},
+											{
+												label: __('Portrait 3:4', 'kadence-blocks'),
+												value: 'port34',
+											},
+											{
+												label: __('Portrait 2:3', 'kadence-blocks'),
+												value: 'port23',
+											},
+											{
+												label: __('Square 1:1', 'kadence-blocks'),
+												value: 'square',
+											},
+										]}
+										onChange={(value) => setAttributes({ ratio: value })}
+									/>
+
+									<KadenceFocalPicker
+										url={url ? url : ''}
+										value={imagePosition ? imagePosition : 'center center'}
+										onChange={(value) => setAttributes({ imagePosition: value })}
+									/>
+								</>
 							)}
 							{showMaxWidth && (
 								<ResponsiveRangeControls
@@ -1526,6 +1536,7 @@ export default function Image({
 									: undefined) +
 							  ')'
 							: undefined,
+					objectPosition: imagePosition ? imagePosition : undefined,
 				}}
 				onError={() => onImageError()}
 				onLoad={(event) => {