WP 6.3 compatibility fixes (#190)

* simplified post featured image controls fixed focal point control conflict with wp 6.3 featured image control * simplified webpack config * fixed FSE editor JS error * Requires at least: 6.2
nk-crew · Oct 1, 2023 · 929088c · 929088c
1 parent ed98e70
commit 929088c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 76 deletions.
diff --git a/assets/admin/css/style.scss b/assets/admin/css/style.scss
@@ -270,19 +270,14 @@ $escaped-svg-characters: (
  * Post featured image focal point meta.
  */
 .vpf-post-image-focal-point-panel {
-	.components-focal-point-picker_position-display-container {
-		.components-base-control__label {
-			max-width: 100%;
-		}
+	margin-top: 20px;
 
-		.components-base-control {
-			margin-bottom: 0;
-		}
+	> .components-panel__row {
+		gap: 15px;
 	}
 
-	// hide default image preview.
-	~ .editor-post-featured-image .editor-post-featured-image__preview {
-		display: none;
+	.components-input-control {
+		flex: 1;
 	}
 }
 

diff --git a/classes/class-preview.php b/classes/class-preview.php
@@ -38,6 +38,8 @@ public function init_hooks() {
 		add_action( 'template_redirect', array( $this, 'template_redirect' ) );
 		add_action( 'wp_enqueue_scripts', array( $this, 'wp_enqueue_scripts' ), 11 );
 
+		// Localize script in editor, FSE, and Elementor.
+		add_action( 'enqueue_block_assets', array( $this, 'localize_scripts' ), 9 );
 		add_action( 'wp_print_scripts', array( $this, 'localize_scripts' ), 9 );
 	}
 
@@ -82,6 +84,10 @@ public function get_preview_url() {
 	 * Localize scripts with preview URL.
 	 */
 	public function localize_scripts() {
+		if ( ! is_admin() ) {
+			return;
+		}
+
 		$preview_url = $this->get_preview_url();
 
 		// Localize scripts.

diff --git a/gutenberg/custom-post-meta/image-focal-point.js b/gutenberg/custom-post-meta/image-focal-point.js
@@ -9,63 +9,33 @@ import { withSelect, withDispatch } from '@wordpress/data';
 
 import { Component } from '@wordpress/element';
 
-import { PanelRow, FocalPointPicker } from '@wordpress/components';
-
 import { addFilter } from '@wordpress/hooks';
 
+import {
+	PanelRow,
+	UnitControl as __stableUnitControl,
+	__experimentalUnitControl,
+} from '@wordpress/components';
+
+const UnitControl = __stableUnitControl || __experimentalUnitControl;
+
 /**
  * Component
  */
 class VpImageFocalPointComponent extends Component {
 	render() {
-		const { getMeta, thumbnailData, updateMeta } = this.props;
-
-		let previewUrl = '';
-
-		if (thumbnailData) {
-			const mediaSize = 'post-thumbnail';
-
-			previewUrl = thumbnailData.source_url;
-
-			if (
-				!thumbnailData.mime_type ||
-				thumbnailData.mime_type !== 'image/gif'
-			) {
-				if (
-					thumbnailData.media_details &&
-					thumbnailData.media_details.sizes &&
-					thumbnailData.media_details.sizes[mediaSize]
-				) {
-					// use mediaSize when available
-					previewUrl =
-						thumbnailData.media_details.sizes[mediaSize].source_url;
-				} else {
-					// get fallbackMediaSize if mediaSize is not available
-					const fallbackMediaSize = 'thumbnail';
-
-					if (
-						thumbnailData.media_details &&
-						thumbnailData.media_details.sizes &&
-						thumbnailData.media_details.sizes[fallbackMediaSize]
-					) {
-						// use fallbackMediaSize when mediaSize is not available
-						previewUrl =
-							thumbnailData.media_details.sizes[fallbackMediaSize]
-								.source_url;
-					}
-				}
-			}
-		}
+		const { getMeta, featuredImageId, updateMeta } = this.props;
 
-		if (!previewUrl) {
+		if (!featuredImageId) {
 			return null;
 		}
 
 		let focalPoint = getMeta('_vp_image_focal_point');
+
 		if (!focalPoint || !focalPoint.x || !focalPoint.y) {
 			focalPoint = {
-				x: '0.5',
-				y: '0.5',
+				x: 0.5,
+				y: 0.5,
 			};
 		}
 
@@ -74,18 +44,39 @@ class VpImageFocalPointComponent extends Component {
 				<PanelRow>
 					<p className="description">
 						{__(
-							'Focal point will be used in Visual Portfolio layouts only.',
+							'Focal point will be used in Visual Portfolio layouts only:',
 							'visual-portfolio'
 						)}
 					</p>
 				</PanelRow>
 				<PanelRow>
-					<FocalPointPicker
-						url={previewUrl}
-						value={focalPoint}
+					<UnitControl
+						label={__('Left', 'visual-portfolio')}
+						value={100 * focalPoint.x + '%'}
 						onChange={(val) => {
-							updateMeta('_vp_image_focal_point', val);
+							const newFocalPoint = { ...focalPoint };
+							newFocalPoint.x = parseFloat(val) / 100;
+
+							updateMeta('_vp_image_focal_point', newFocalPoint);
 						}}
+						min={0}
+						max={100}
+						step={1}
+						units={[{ value: '%', label: '%' }]}
+					/>
+					<UnitControl
+						label={__('Top', 'visual-portfolio')}
+						value={100 * focalPoint.y + '%'}
+						onChange={(val) => {
+							const newFocalPoint = { ...focalPoint };
+							newFocalPoint.y = parseFloat(val) / 100;
+
+							updateMeta('_vp_image_focal_point', newFocalPoint);
+						}}
+						min={0}
+						max={100}
+						step={1}
+						units={[{ value: '%', label: '%' }]}
 					/>
 				</PanelRow>
 			</div>
@@ -97,16 +88,11 @@ const VpImageFocalPoint = compose([
 	withSelect((select) => {
 		const { getEditedPostAttribute } = select('core/editor');
 
-		const { getMedia } = select('core');
-
 		const featuredImageId = getEditedPostAttribute('featured_media');
 		const meta = getEditedPostAttribute('meta') || {};
-		const thumbnailData = featuredImageId
-			? getMedia(featuredImageId)
-			: null;
 
 		return {
-			thumbnailData,
+			featuredImageId,
 			getMeta(name) {
 				return meta[name];
 			},
@@ -127,8 +113,8 @@ addFilter(
 		function (props) {
 			return (
 				<>
-					<VpImageFocalPoint />
 					<OriginalComponent {...props} />
+					<VpImageFocalPoint />
 				</>
 			);
 		}

diff --git a/readme.txt b/readme.txt
@@ -3,7 +3,7 @@
 * Contributors: nko
 * Tags: portfolio, gallery, photo gallery, image gallery, wordpress gallery plugin
 * Donate link: https://visualportfolio.co/?utm_source=wordpress.org&utm_medium=readme&utm_campaign=donate
-* Requires at least: 6.0
+* Requires at least: 6.2
 * Tested up to: 6.3
 * Requires PHP: 7.2
 * Stable tag: 3.1.3

diff --git a/webpack.config.js b/webpack.config.js
@@ -170,17 +170,16 @@ const entryAssetsCss = glob
 
 const newConfig = {
 	...defaultConfig,
-	...{
-		entry: {
-			// Assets JS.
-			...entryAssetsJs,
-			// Assets CSS.
-			...entryAssetsCss,
-		},
-
-		// Display minimum info in terminal.
-		stats: 'minimal',
+	entry: {
+		// Assets JS.
+		...entryAssetsJs,
+		// Assets CSS.
+		...entryAssetsCss,
 	},
+
+	// Display minimum info in terminal.
+	stats: 'minimal',
+
 	module: {
 		...defaultConfig.module,
 		rules: [...defaultConfig.module.rules],