From 72ea164cf388edd91c0048bf4808732ea78da6e2 Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Wed, 20 Nov 2024 12:13:53 -0500 Subject: [PATCH 1/7] Minor query fixes --- includes/class-query-utils.php | 31 ++----------------------------- src/hoc/withHtmlAttributes.js | 3 +++ 2 files changed, 5 insertions(+), 29 deletions(-) diff --git a/includes/class-query-utils.php b/includes/class-query-utils.php index 0e3b7d228..5b345649f 100644 --- a/includes/class-query-utils.php +++ b/includes/class-query-utils.php @@ -173,22 +173,21 @@ public static function get_wp_query_args( $args = [], $page = 1, $attributes = [ if ( 'ignore' === $args['stickyPosts'] ) { $args['ignore_sticky_posts'] = true; - unset( $args['stickyPosts'] ); } if ( 'exclude' === $args['stickyPosts'] ) { $sticky_posts = get_option( 'sticky_posts' ); $post_not_in = isset( $args['post__not_in'] ) && is_array( $args['post__not_in'] ) ? $args['post__not_in'] : array(); $args['post__not_in'] = array_merge( $sticky_posts, $post_not_in ); - unset( $args['stickyPosts'] ); } if ( 'only' === $args['stickyPosts'] ) { $sticky_posts = get_option( 'sticky_posts' ); $args['ignore_sticky_posts'] = true; $args['post__in'] = $sticky_posts; - unset( $args['stickyPosts'] ); } + + unset( $args['stickyPosts'] ); } // Ensure offset works correctly with pagination. @@ -271,32 +270,6 @@ function( $value ) { ); } - /** - * Map query parameters to their correct query names. - * - * @param array $attributes Block attributes. - */ - public static function map_post_type_attributes( $attributes ) { - $attributes_map = array( - 'page' => 'paged', - 'per_page' => 'posts_per_page', - 'search' => 's', - 'after' => 'date_query_after', - 'before' => 'date_query_before', - 'author' => 'author__in', - 'exclude' => 'post__not_in', - 'include' => 'post__in', - 'order' => 'order', - 'orderby' => 'orderby', - 'status' => 'post_status', - 'parent' => 'post_parent__in', - 'parent_exclude' => 'post_parent__not_in', - 'author_exclude' => 'author__not_in', - ); - - return generateblocks_map_array_keys( $attributes, $attributes_map ); - } - /** * Normalize the tax query attributes to be used in the WP_Query * diff --git a/src/hoc/withHtmlAttributes.js b/src/hoc/withHtmlAttributes.js index 2c89433a6..ea8012b63 100644 --- a/src/hoc/withHtmlAttributes.js +++ b/src/hoc/withHtmlAttributes.js @@ -78,6 +78,9 @@ export function withHtmlAttributes( WrappedComponent ) { 'data-gb-id': uniqueId, 'data-context-post-id': context?.postId ?? 0, }; + + console.log( combinedAttributes ); + const frontendHtmlAttributes = useMemo( () => { if ( Array.isArray( htmlAttributes ) ) { return {}; From d6d06d5c34969c8e29772c95e740c0550ff74f90 Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Wed, 20 Nov 2024 12:14:06 -0500 Subject: [PATCH 2/7] Fix dynamic background images --- src/blocks/element/block.json | 3 +- .../element/components/BlockSettings.jsx | 2 + .../components/InlineBackgroundImage.jsx | 17 +++++--- src/blocks/element/edit.js | 7 +++- src/dynamic-tags/useTagReplacements.js | 20 ++++++++++ src/hoc/withDynamicTag.js | 5 +++ src/hoc/withHtmlAttributes.js | 40 ++++++++++++++++--- 7 files changed, 80 insertions(+), 14 deletions(-) create mode 100644 src/dynamic-tags/useTagReplacements.js diff --git a/src/blocks/element/block.json b/src/blocks/element/block.json index 4d443ebb0..3f9e5dff7 100644 --- a/src/blocks/element/block.json +++ b/src/blocks/element/block.json @@ -59,7 +59,8 @@ "usesContext": [ "generateblocks/queryData", "generateblocks/queryType", - "generateblocks/paginationType" + "generateblocks/paginationType", + "postId" ], "editorScript": "file:./index.js", "editorStyle": [ diff --git a/src/blocks/element/components/BlockSettings.jsx b/src/blocks/element/components/BlockSettings.jsx index c632ef813..060687b64 100644 --- a/src/blocks/element/components/BlockSettings.jsx +++ b/src/blocks/element/components/BlockSettings.jsx @@ -29,6 +29,7 @@ export function BlockSettings( { htmlAttributes, styles, context, + dynamicTagValue, } ) { const { tagName, @@ -257,6 +258,7 @@ export function BlockSettings( { styles={ styles } onStyleChange={ onStyleChange } context={ context } + dynamicTagValue={ dynamicTagValue } /> diff --git a/src/blocks/element/components/InlineBackgroundImage.jsx b/src/blocks/element/components/InlineBackgroundImage.jsx index a0695c82c..c2f486729 100644 --- a/src/blocks/element/components/InlineBackgroundImage.jsx +++ b/src/blocks/element/components/InlineBackgroundImage.jsx @@ -2,10 +2,17 @@ import { useEffect, useMemo } from '@wordpress/element'; import { ImageUpload } from '@components/index.js'; -export function InlineBackgroundImage( { htmlAttributes, setAttributes, styles, onStyleChange, context, label } ) { - const inlineBackgroundURL = useMemo( () => { - const { style = '' } = htmlAttributes; +export function InlineBackgroundImage( { + htmlAttributes, + setAttributes, + styles, + onStyleChange, + context, + label, +} ) { + const { style = '' } = htmlAttributes; + const inlineBackgroundURL = useMemo( () => { const styleParts = style.split( ';' ); if ( 0 === styleParts.length ) { @@ -21,11 +28,9 @@ export function InlineBackgroundImage( { htmlAttributes, setAttributes, styles, } return inlineBackgroundPart.split( 'url(' )[ 1 ].split( ')' )[ 0 ]; - }, [ htmlAttributes?.style ] ); + }, [ style ] ); function onChange( value ) { - const { style = '' } = htmlAttributes; - if ( ! value ) { if ( style ) { const newHtmlAttributes = { ...htmlAttributes }; diff --git a/src/blocks/element/edit.js b/src/blocks/element/edit.js index 1f14da5a8..a190541ca 100644 --- a/src/blocks/element/edit.js +++ b/src/blocks/element/edit.js @@ -9,6 +9,7 @@ import { selectorShortcuts } from '@utils/selectorShortcuts.js'; import { withStyles } from '@hoc/withStyles'; import { BlockStylesBuilder, StylesOnboarder } from '@components/index.js'; import { withHtmlAttributes } from '@hoc/withHtmlAttributes.js'; +import { withDynamicTag } from '@hoc/withDynamicTag.js'; import { getBlockClasses } from '@utils/getBlockClasses.js'; import { BlockAppender } from '@components'; @@ -22,8 +23,11 @@ function EditBlock( props ) { onStyleChange, editorHtmlAttributes, styles, + dynamicTagValue, } = props; + console.log( dynamicTagValue ); + const { tagName, } = attributes; @@ -125,7 +129,8 @@ function EditBlock( props ) { const Edit = compose( withHtmlAttributes, withStyles, - withUniqueId + withDynamicTag, + withUniqueId, )( EditBlock ); export { Edit }; diff --git a/src/dynamic-tags/useTagReplacements.js b/src/dynamic-tags/useTagReplacements.js new file mode 100644 index 000000000..9970d1fd1 --- /dev/null +++ b/src/dynamic-tags/useTagReplacements.js @@ -0,0 +1,20 @@ +import apiFetch from '@wordpress/api-fetch'; + +export async function replaceTags( content, context = {} ) { + // Define an async function to fetch data + try { + const response = await apiFetch( { + path: '/generateblocks/v1/dynamic-tag-replacements', + method: 'POST', + data: { + content, + context, + }, + } ); + + return response; + } catch ( error ) { + console.error( 'Error fetching data:', error ); // eslint-disable-line no-console + return ''; + } +} diff --git a/src/hoc/withDynamicTag.js b/src/hoc/withDynamicTag.js index f11887bc8..0a6f0a8da 100644 --- a/src/hoc/withDynamicTag.js +++ b/src/hoc/withDynamicTag.js @@ -16,11 +16,16 @@ export function withDynamicTag( WrappedComponent ) { const [ dynamicTagValue, setDynamicTagValue ] = useState( '' ); const [ contentMode, setContentMode ] = useState( 'edit' ); + const getContentValue = () => { if ( 'img' === tagName ) { return htmlAttributes?.src; } + if ( htmlAttributes?.style?.includes( '{{' ) ) { + return htmlAttributes?.style; + } + if ( content?.originalHTML ) { return content.originalHTML; } diff --git a/src/hoc/withHtmlAttributes.js b/src/hoc/withHtmlAttributes.js index ea8012b63..5ec855a4f 100644 --- a/src/hoc/withHtmlAttributes.js +++ b/src/hoc/withHtmlAttributes.js @@ -1,8 +1,9 @@ -import { useEffect, useMemo } from '@wordpress/element'; +import { useEffect, useMemo, useState } from '@wordpress/element'; import { InspectorAdvancedControls } from '@wordpress/block-editor'; import { TextControl } from '@wordpress/components'; import { convertInlineStyleStringToObject } from '@utils/convertInlineStyleStringToObject'; +import { replaceTags } from '../dynamic-tags/useTagReplacements'; export const booleanAttributes = [ 'allowfullscreen', @@ -68,10 +69,39 @@ export function withHtmlAttributes( WrappedComponent ) { uniqueId, } = attributes; + const [ styleWithReplacements, setStyleWithReplacements ] = useState( '' ); const { style = '', href, ...otherAttributes } = htmlAttributes; - const inlineStyleObject = typeof style === 'string' - ? convertInlineStyleStringToObject( style ) - : style; + + useEffect( () => { + async function getReplacements() { + // Check if any replacements need to be made if not, do nothing. + if ( ! style.includes( '{{' ) ) { + return style; + } + + const replacements = await replaceTags( style, context ); + + if ( ! replacements.length ) { + return style; + } + + const withReplacements = replacements.reduce( ( acc, { original, replacement, fallback } ) => { + if ( ! replacement ) { + return acc.replaceAll( original, fallback ); + } + + return acc.replaceAll( original, replacement ); + }, style ); + + setStyleWithReplacements( withReplacements ? withReplacements : style ); + } + + getReplacements(); + }, [ style, context ] ); + + const inlineStyleObject = typeof styleWithReplacements === 'string' + ? convertInlineStyleStringToObject( styleWithReplacements ) + : ''; const combinedAttributes = { ...otherAttributes, style: inlineStyleObject, @@ -79,8 +109,6 @@ export function withHtmlAttributes( WrappedComponent ) { 'data-context-post-id': context?.postId ?? 0, }; - console.log( combinedAttributes ); - const frontendHtmlAttributes = useMemo( () => { if ( Array.isArray( htmlAttributes ) ) { return {}; From c2689968c96bd15ccc7f767105069357c9a1ccca Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Wed, 20 Nov 2024 12:24:56 -0500 Subject: [PATCH 3/7] Add replaceTags utility function, fix additional bg image things --- .../{useTagReplacements.js => utils.js} | 0 src/hoc/withDynamicTag.js | 27 +++++-------------- src/hoc/withHtmlAttributes.js | 2 +- 3 files changed, 8 insertions(+), 21 deletions(-) rename src/dynamic-tags/{useTagReplacements.js => utils.js} (100%) diff --git a/src/dynamic-tags/useTagReplacements.js b/src/dynamic-tags/utils.js similarity index 100% rename from src/dynamic-tags/useTagReplacements.js rename to src/dynamic-tags/utils.js diff --git a/src/hoc/withDynamicTag.js b/src/hoc/withDynamicTag.js index 0a6f0a8da..1a6cbc273 100644 --- a/src/hoc/withDynamicTag.js +++ b/src/hoc/withDynamicTag.js @@ -1,5 +1,5 @@ import { useState, useEffect } from '@wordpress/element'; -import apiFetch from '@wordpress/api-fetch'; +import { replaceTags } from '../dynamic-tags/utils'; export function withDynamicTag( WrappedComponent ) { return ( ( props ) => { @@ -45,27 +45,14 @@ export function withDynamicTag( WrappedComponent ) { return; } - // Define an async function to fetch data - const fetchData = async() => { - try { - const response = await apiFetch( { - path: '/generateblocks/v1/dynamic-tag-replacements', - method: 'POST', - data: { - content: contentValue, - context, - }, - } ); + async function fetchData() { + const response = await replaceTags( contentValue, context ); - setDynamicTagValue( response ); - } catch ( error ) { - console.error( 'Error fetching data:', error ); // eslint-disable-line no-console - setDynamicTagValue( null ); // Handle error case - } - }; + setDynamicTagValue( response ); + } - fetchData(); // Call the async function - }, [ contentValue, contentMode ] ); + fetchData(); + }, [ contentValue, contentMode, context ] ); return ( Date: Wed, 20 Nov 2024 14:42:49 -0500 Subject: [PATCH 4/7] Cleanup --- src/blocks/element/edit.js | 5 ----- src/hoc/withDynamicTag.js | 4 ---- 2 files changed, 9 deletions(-) diff --git a/src/blocks/element/edit.js b/src/blocks/element/edit.js index a190541ca..92038ccd9 100644 --- a/src/blocks/element/edit.js +++ b/src/blocks/element/edit.js @@ -9,7 +9,6 @@ import { selectorShortcuts } from '@utils/selectorShortcuts.js'; import { withStyles } from '@hoc/withStyles'; import { BlockStylesBuilder, StylesOnboarder } from '@components/index.js'; import { withHtmlAttributes } from '@hoc/withHtmlAttributes.js'; -import { withDynamicTag } from '@hoc/withDynamicTag.js'; import { getBlockClasses } from '@utils/getBlockClasses.js'; import { BlockAppender } from '@components'; @@ -23,11 +22,8 @@ function EditBlock( props ) { onStyleChange, editorHtmlAttributes, styles, - dynamicTagValue, } = props; - console.log( dynamicTagValue ); - const { tagName, } = attributes; @@ -129,7 +125,6 @@ function EditBlock( props ) { const Edit = compose( withHtmlAttributes, withStyles, - withDynamicTag, withUniqueId, )( EditBlock ); diff --git a/src/hoc/withDynamicTag.js b/src/hoc/withDynamicTag.js index 1a6cbc273..a728f7c45 100644 --- a/src/hoc/withDynamicTag.js +++ b/src/hoc/withDynamicTag.js @@ -22,10 +22,6 @@ export function withDynamicTag( WrappedComponent ) { return htmlAttributes?.src; } - if ( htmlAttributes?.style?.includes( '{{' ) ) { - return htmlAttributes?.style; - } - if ( content?.originalHTML ) { return content.originalHTML; } From 72afab75421274536e55a41ba6ee9577125c0340 Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Wed, 20 Nov 2024 14:44:43 -0500 Subject: [PATCH 5/7] Revert component updates --- .../components/InlineBackgroundImage.jsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/blocks/element/components/InlineBackgroundImage.jsx b/src/blocks/element/components/InlineBackgroundImage.jsx index c2f486729..a0695c82c 100644 --- a/src/blocks/element/components/InlineBackgroundImage.jsx +++ b/src/blocks/element/components/InlineBackgroundImage.jsx @@ -2,17 +2,10 @@ import { useEffect, useMemo } from '@wordpress/element'; import { ImageUpload } from '@components/index.js'; -export function InlineBackgroundImage( { - htmlAttributes, - setAttributes, - styles, - onStyleChange, - context, - label, -} ) { - const { style = '' } = htmlAttributes; - +export function InlineBackgroundImage( { htmlAttributes, setAttributes, styles, onStyleChange, context, label } ) { const inlineBackgroundURL = useMemo( () => { + const { style = '' } = htmlAttributes; + const styleParts = style.split( ';' ); if ( 0 === styleParts.length ) { @@ -28,9 +21,11 @@ export function InlineBackgroundImage( { } return inlineBackgroundPart.split( 'url(' )[ 1 ].split( ')' )[ 0 ]; - }, [ style ] ); + }, [ htmlAttributes?.style ] ); function onChange( value ) { + const { style = '' } = htmlAttributes; + if ( ! value ) { if ( style ) { const newHtmlAttributes = { ...htmlAttributes }; From b800fd7aa0ff817caf61839c0f6ae8886c97bb5b Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Wed, 20 Nov 2024 14:47:00 -0500 Subject: [PATCH 6/7] Additional cleanup --- src/blocks/element/components/BlockSettings.jsx | 2 -- src/blocks/element/edit.js | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/blocks/element/components/BlockSettings.jsx b/src/blocks/element/components/BlockSettings.jsx index 060687b64..c632ef813 100644 --- a/src/blocks/element/components/BlockSettings.jsx +++ b/src/blocks/element/components/BlockSettings.jsx @@ -29,7 +29,6 @@ export function BlockSettings( { htmlAttributes, styles, context, - dynamicTagValue, } ) { const { tagName, @@ -258,7 +257,6 @@ export function BlockSettings( { styles={ styles } onStyleChange={ onStyleChange } context={ context } - dynamicTagValue={ dynamicTagValue } /> diff --git a/src/blocks/element/edit.js b/src/blocks/element/edit.js index 92038ccd9..1f14da5a8 100644 --- a/src/blocks/element/edit.js +++ b/src/blocks/element/edit.js @@ -125,7 +125,7 @@ function EditBlock( props ) { const Edit = compose( withHtmlAttributes, withStyles, - withUniqueId, + withUniqueId )( EditBlock ); export { Edit }; From c1f89ed80adc87715f9f77617c67dd2d291fe0cf Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Thu, 21 Nov 2024 12:37:55 -0500 Subject: [PATCH 7/7] Fixes, update styles-builder to latest --- package-lock.json | 12 +++++------ package.json | 2 +- .../components/InlineBackgroundImage.jsx | 20 +++++-------------- src/hoc/withHtmlAttributes.js | 6 ++++-- 4 files changed, 16 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index cceaa3362..b4a88f55a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,17 @@ { "name": "generateblocks", - "version": "2.0.0-alpha.2", + "version": "2.0.0-beta.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "generateblocks", - "version": "2.0.0-alpha.2", + "version": "2.0.0-beta.1", "license": "GPL-2.0-or-later", "dependencies": { "@edge22/block-styles": "^1.1.30", "@edge22/components": "^1.1.42", - "@edge22/styles-builder": "^1.2.38", + "@edge22/styles-builder": "^1.2.40", "@wordpress/block-editor": "^12.12.0", "@wordpress/blocks": "^12.21.0", "@wordpress/components": "^25.10.0", @@ -2174,9 +2174,9 @@ } }, "node_modules/@edge22/styles-builder": { - "version": "1.2.38", - "resolved": "https://registry.npmjs.org/@edge22/styles-builder/-/styles-builder-1.2.38.tgz", - "integrity": "sha512-/xrqX5Fh3DiJ86HB9PGAUgLpeH+WYqELzioFyB5BiGmQ5Cnx/VpRV/womJEFT7GND4Lbxv/rNYEp61UKB4Q0VQ==", + "version": "1.2.40", + "resolved": "https://registry.npmjs.org/@edge22/styles-builder/-/styles-builder-1.2.40.tgz", + "integrity": "sha512-CIxZUhxoPFWQhqmA+mBMvSWKlxcNTzxYHy/MfDGJSsQHxnokHU9ITbu8y7mwE0K1fOQTaeoW6Sah6rXv/rlf5A==", "dependencies": { "@wordpress/icons": "^9.48.0", "clsx": "^2.1.1", diff --git a/package.json b/package.json index f4ca0dd91..81165c88a 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "dependencies": { "@edge22/block-styles": "^1.1.30", "@edge22/components": "^1.1.42", - "@edge22/styles-builder": "^1.2.38", + "@edge22/styles-builder": "^1.2.40", "@wordpress/block-editor": "^12.12.0", "@wordpress/blocks": "^12.21.0", "@wordpress/components": "^25.10.0", diff --git a/src/blocks/element/components/InlineBackgroundImage.jsx b/src/blocks/element/components/InlineBackgroundImage.jsx index a0695c82c..06abfeb31 100644 --- a/src/blocks/element/components/InlineBackgroundImage.jsx +++ b/src/blocks/element/components/InlineBackgroundImage.jsx @@ -13,7 +13,7 @@ export function InlineBackgroundImage( { htmlAttributes, setAttributes, styles, } const inlineBackgroundPart = styleParts.find( ( part ) => ( - part.startsWith( '--inline-bg-image' ) + part.trim().startsWith( '--inline-bg-image' ) ) ); if ( ! inlineBackgroundPart ) { @@ -26,25 +26,15 @@ export function InlineBackgroundImage( { htmlAttributes, setAttributes, styles, function onChange( value ) { const { style = '' } = htmlAttributes; - if ( ! value ) { - if ( style ) { - const newHtmlAttributes = { ...htmlAttributes }; - delete newHtmlAttributes.style; - setAttributes( { - htmlAttributes: newHtmlAttributes, - } ); - } - - return; - } - const styleParts = style .split( ';' ) .filter( ( part ) => ( - '' !== part && ! part.startsWith( '--inline-bg-image' ) + '' !== part && ! part.trim().startsWith( '--inline-bg-image' ) ) ); - styleParts.push( '--inline-bg-image: url(' + value + ')' ); + if ( value ) { + styleParts.push( '--inline-bg-image: url(' + value + ')' ); + } setAttributes( { htmlAttributes: { diff --git a/src/hoc/withHtmlAttributes.js b/src/hoc/withHtmlAttributes.js index acf12b28a..065311361 100644 --- a/src/hoc/withHtmlAttributes.js +++ b/src/hoc/withHtmlAttributes.js @@ -76,13 +76,15 @@ export function withHtmlAttributes( WrappedComponent ) { async function getReplacements() { // Check if any replacements need to be made if not, do nothing. if ( ! style.includes( '{{' ) ) { - return style; + setStyleWithReplacements( style ); + return; } const replacements = await replaceTags( style, context ); if ( ! replacements.length ) { - return style; + setStyleWithReplacements( style ); + return; } const withReplacements = replacements.reduce( ( acc, { original, replacement, fallback } ) => {