Adding in photo positioning.

DLXPlugins · Sep 24, 2024 · 77960b2 · 77960b2
1 parent 477daf6
commit 77960b2
Show file tree

Hide file tree

Showing 12 changed files with 286 additions and 28 deletions.
diff --git a/build/blocks/photo-block/block.json b/build/blocks/photo-block/block.json
@@ -341,6 +341,10 @@
       "type": "string",
       "default": "center"
     },
+    "photoPosition": {
+      "type": "string",
+      "default": "center"
+    },
     "imageSize": {
       "type": "string",
       "default": "large"

diff --git a/build/index.asset.php b/build/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-escape-html', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-plugins', 'wp-url'), 'version' => 'a80a1794c64297fec9e3');
+<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-escape-html', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => 'db5e1769faa91c9fc22f');
diff --git a/build/index.css b/build/index.css
diff --git a/build/index.css.map b/build/index.css.map
diff --git a/build/index.js b/build/index.js
diff --git a/build/index.js.map b/build/index.js.map
diff --git a/includes/Blocks.php b/includes/Blocks.php
@@ -911,6 +911,7 @@ function ( $v, $k ) {
 		$section_css_classes = array(
 			'dlx-photo-block__container',
 			'align' . esc_attr( $attributes['align'] ),
+			'dlx-photo-position-' . esc_attr( $attributes['photoPosition'] ),
 		);
 		if ( $has_global_style ) {
 			$section_css_classes[] = $global_style_css_class;

diff --git a/src/blocks/photo-block/block.json b/src/blocks/photo-block/block.json
@@ -341,6 +341,10 @@
 			"type": "string",
 			"default": "center"
 		},
+		"photoPosition": {
+			"type": "string",
+			"default": "center"
+		},
 		"imageSize": {
 			"type": "string",
 			"default": "large"

diff --git a/src/blocks/photo-block/edit.js b/src/blocks/photo-block/edit.js
@@ -131,6 +131,7 @@ const PhotoBlock = ( props ) => {
 		align,
 		globalStyle,
 		photoDropShadow,
+		photoPosition,
 	} = props.attributes;
 
 	const { globalStyleCSSClassName } = useSelect( ( newSelect ) => {
@@ -184,6 +185,7 @@ const PhotoBlock = ( props ) => {
 		className: classnames(
 			`dlx-photo-block`,
 			`align${ align }`,
+			`dlx-photo-position-${ photoPosition }`,
 			`dlx-screen-${ currentScreen }`,
 			`dlx-caption-position-${ captionPosition }`,
 			globalStyleCSSClassName,

diff --git a/src/screens/Edit/index.js b/src/screens/Edit/index.js
@@ -41,6 +41,11 @@ import {
 	Layers,
 	Undo2,
 } from 'lucide-react';
+import {
+	positionLeft,
+	positionRight,
+	positionCenter,
+} from '@wordpress/icons';
 import { applyFilters } from '@wordpress/hooks';
 import classnames from 'classnames';
 import { blockStore } from '../../store';
@@ -75,6 +80,7 @@ const EditScreen = forwardRef( ( props, ref ) => {
 		imageSize,
 		cssGramFilter,
 		globalStyle,
+		photoPosition,
 	} = attributes;
 
 	const { globalStyleCSSClassName } = useSelect( ( newSelect ) => {
@@ -399,6 +405,32 @@ const EditScreen = forwardRef( ( props, ref ) => {
 						<AlignmentToolbar { ...props } />
 					)
 				}
+				<ToolbarGroup>
+					<ToolbarButton
+						icon={ positionLeft	 }
+						label={ __( 'Positon Left', 'photo-block' ) }
+						onClick={ () => {
+							setAttributes( { photoPosition: 'left' } );
+						} }
+						isPressed={ 'left' === photoPosition }
+					/>
+					<ToolbarButton
+						icon={ positionCenter }
+						label={ __( 'Positon Center', 'photo-block' ) }
+						onClick={ () => {
+							setAttributes( { photoPosition: 'center' } );
+						} }
+						isPressed={ 'center' === photoPosition }
+					/>
+					<ToolbarButton
+						icon={ positionRight }
+						label={ __( 'Positon Right', 'photo-block' ) }
+						onClick={ () => {
+							setAttributes( { photoPosition: 'right' } );
+						} }
+						isPressed={ 'right' === photoPosition }
+					/>
+				</ToolbarGroup>
 				<ToolbarGroup>
 					{
 						isJustCropped && (
@@ -427,15 +459,6 @@ const EditScreen = forwardRef( ( props, ref ) => {
 					>
 						{ __( 'Crop', 'photo-block' ) }
 					</ToolbarButton>
-					{ /* <ToolbarButton
-						icon={ <Stars /> }
-						label={ __( 'Effects', 'photo-block' ) }
-						onClick={ () => {
-							setScreen( 'effects' );
-						} }
-					>
-						{ __( 'Effects', 'photo-block' ) }
-					</ToolbarButton> */ }
 				</ToolbarGroup>
 				<ToolbarGroup>
 					<ToolbarButton

diff --git a/src/screens/FeaturedImageEdit/index.js b/src/screens/FeaturedImageEdit/index.js
@@ -27,7 +27,11 @@ import {
 import classnames from 'classnames';
 import hexToRgba from 'hex-to-rgba';
 import { useDispatch, useSelect } from '@wordpress/data';
-
+import {
+	positionLeft,
+	positionRight,
+	positionCenter,
+} from '@wordpress/icons';
 import SendCommand from '../../utils/SendCommand';
 import useDeviceType from '../../hooks/useDeviceType';
 import PanelBodyControl from '../../components/PanelBody';
@@ -70,6 +74,7 @@ const FeaturedImageScreen = forwardRef( ( props, ref ) => {
 		photoOpacity,
 		photoBlur,
 		photoDropShadow,
+		photoPosition,
 		photoBackgroundColor,
 		cssGramFilter,
 		lightboxEnabled,
@@ -326,6 +331,32 @@ const FeaturedImageScreen = forwardRef( ( props, ref ) => {
 						<AlignmentToolbar { ...props } />
 					)
 				}
+				<ToolbarGroup>
+					<ToolbarButton
+						icon={ positionLeft	 }
+						label={ __( 'Positon Left', 'photo-block' ) }
+						onClick={ () => {
+							setAttributes( { photoPosition: 'left' } );
+						} }
+						isPressed={ 'left' === photoPosition }
+					/>
+					<ToolbarButton
+						icon={ positionCenter }
+						label={ __( 'Positon Center', 'photo-block' ) }
+						onClick={ () => {
+							setAttributes( { photoPosition: 'center' } );
+						} }
+						isPressed={ 'center' === photoPosition }
+					/>
+					<ToolbarButton
+						icon={ positionRight }
+						label={ __( 'Positon Right', 'photo-block' ) }
+						onClick={ () => {
+							setAttributes( { photoPosition: 'right' } );
+						} }
+						isPressed={ 'right' === photoPosition }
+					/>
+				</ToolbarGroup>
 				<ToolbarGroup>
 					<ToolbarButton
 						icon={ <Link /> }

diff --git a/src/scss/block-backend-frontend.scss b/src/scss/block-backend-frontend.scss
@@ -24,6 +24,15 @@
 	flex-direction: column;
 	align-items: center;
 }
+.dlx-photo-position-left .dlx-photo-block__figure {
+	align-items: flex-start
+}
+.dlx-photo-position-right .dlx-photo-block__figure {
+	align-items: flex-end;
+}
+.dlx-photo-position-center .dlx-photo-block__figure {
+	align-items: center;
+}
 .dlx-photo-block__image {
 	box-sizing: border-box;
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-escape-html', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-plugins', 'wp-url'), 'version' => 'a80a1794c64297fec9e3');
		<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-escape-html', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => 'db5e1769faa91c9fc22f');