From 9abccab84879db7e50b9a677f783453dee16ad9d Mon Sep 17 00:00:00 2001 From: Nikita Date: Sun, 1 Oct 2023 13:02:03 +0300 Subject: [PATCH 1/4] simplified post featured image controls fixed focal point control conflict with wp 6.3 featured image control --- assets/admin/css/style.scss | 15 +-- .../custom-post-meta/image-focal-point.js | 96 ++++++++----------- 2 files changed, 46 insertions(+), 65 deletions(-) diff --git a/assets/admin/css/style.scss b/assets/admin/css/style.scss index dd5bd1c6..f51a75c1 100644 --- 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/gutenberg/custom-post-meta/image-focal-point.js b/gutenberg/custom-post-meta/image-focal-point.js index 7ae52417..1ab3cc09 100644 --- 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 {

{__( - 'Focal point will be used in Visual Portfolio layouts only.', + 'Focal point will be used in Visual Portfolio layouts only:', 'visual-portfolio' )}

- { - 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: '%' }]} + /> + { + const newFocalPoint = { ...focalPoint }; + newFocalPoint.y = parseFloat(val) / 100; + + updateMeta('_vp_image_focal_point', newFocalPoint); + }} + min={0} + max={100} + step={1} + units={[{ value: '%', label: '%' }]} /> @@ -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 ( <> - + ); } From 29c39e3e910a9001cb4f487cef58955d5dd848ff Mon Sep 17 00:00:00 2001 From: Nikita Date: Sun, 1 Oct 2023 13:02:22 +0300 Subject: [PATCH 2/4] simplified webpack config --- webpack.config.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 204e7c17..8a431b49 100644 --- 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], From 438b775637252d881bf87825a31c0a553667af27 Mon Sep 17 00:00:00 2001 From: Nikita Date: Sun, 1 Oct 2023 13:46:44 +0300 Subject: [PATCH 3/4] fixed FSE editor JS error --- classes/class-preview.php | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/classes/class-preview.php b/classes/class-preview.php index 6640740b..03dcc3c6 100644 --- 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. From a031dfb1047bd283a4375d5e7eedbf4d854ed210 Mon Sep 17 00:00:00 2001 From: Nikita Date: Sun, 1 Oct 2023 14:35:54 +0300 Subject: [PATCH 4/4] Requires at least: 6.2 --- readme.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.txt b/readme.txt index d8a6ba1f..1a3bc482 100644 --- 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