Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions interactions.php
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,22 @@ function interact_require_types() {
// require_once( plugin_dir_path( __FILE__ ) . 'src/interaction-types/class-interaction-type-form-submitted.php' );
require_once( plugin_dir_path( __FILE__ ) . 'src/interaction-types/class-interaction-type-element-scrolling.php' );

// Stackable integration
if ( defined( 'STACKABLE_VERSION' ) ) {
require_once( plugin_dir_path( __FILE__ ) . 'src/integrations/stackable/action-types/class-action-type-stackable-accordion-toggle.php' );
require_once( plugin_dir_path( __FILE__ ) . 'src/integrations/stackable/interaction-types/class-interaction-type-stackable-accordion-toggle.php' );
require_once( plugin_dir_path( __FILE__ ) . 'src/integrations/stackable/action-types/class-action-type-stackable-carousel-change-slide.php' );
require_once( plugin_dir_path( __FILE__ ) . 'src/integrations/stackable/interaction-types/class-interaction-type-stackable-carousel-slide-change.php' );
require_once( plugin_dir_path( __FILE__ ) . 'src/integrations/stackable/action-types/class-action-type-stackable-tabs-change-tab.php' );
require_once( plugin_dir_path( __FILE__ ) . 'src/integrations/stackable/interaction-types/class-interaction-type-stackable-tabs-change.php' );
require_once( plugin_dir_path( __FILE__ ) . 'src/integrations/stackable/action-types/class-action-type-stackable-horizontal-scroller-scroll.php' );
require_once( plugin_dir_path( __FILE__ ) . 'src/integrations/stackable/interaction-types/class-interaction-type-stackable-horizontal-scroller-scroll.php' );

require_once( plugin_dir_path( __FILE__ ) . 'src/integrations/stackable/action-types/class-action-type-stackable-progress-bar-change-value.php' );
require_once( plugin_dir_path( __FILE__ ) . 'src/integrations/stackable/action-types/class-action-type-stackable-progress-circle-change-value.php' );
require_once( plugin_dir_path( __FILE__ ) . 'src/integrations/stackable/action-types/class-action-type-stackable-count-up-reset.php' );
}

do_action( 'interact/require_types' );
}
}
Expand Down
46 changes: 46 additions & 0 deletions scripts/generate-frontend-php-scripts.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,52 @@ const processSourceDir = sourceDir => {
}
} )
}

// Stackable intergration interaction types
fs.readdirSync( path.resolve( __dirname, '../src/integrations/stackable/interaction-types/frontend' ) )
.filter( file => file.endsWith( '.js' ) )
.forEach( async file => {
const type = file.replace( '.js', '' )
const scriptPath = path.resolve( __dirname, `../src/integrations/stackable//interaction-types/frontend/${ file }` )
const scriptPathRelative = path.relative( path.resolve( __dirname, '../' ), scriptPath )
const outputFile = path.resolve( __dirname, `../dist/frontend/interactions/${ type }.php` )
const content = fs.readFileSync( scriptPath, 'utf8' )

if ( buildType === 'development' ) {
writeFile( content, outputFile, scriptPathRelative )
} else {
await minify( {
compressor: uglifyJS,
content,
output: outputFile,
} ).then( min => {
writeFile( min, outputFile, scriptPathRelative )
} )
}
} )

// Stackable intergration action types
fs.readdirSync( path.resolve( __dirname, '../src/integrations/stackable/action-types/frontend' ) )
.filter( file => file.endsWith( '.js' ) )
.forEach( async file => {
const type = file.replace( '.js', '' )
const scriptPath = path.resolve( __dirname, `../src/integrations/stackable/action-types/frontend/${ file }` )
const scriptPathRelative = path.relative( path.resolve( __dirname, '../' ), scriptPath )
const outputFile = path.resolve( __dirname, `../dist/frontend/actions/${ type }.php` )
const content = fs.readFileSync( scriptPath, 'utf8' )

if ( buildType === 'development' ) {
writeFile( content, outputFile, scriptPathRelative )
} else {
await minify( {
compressor: uglifyJS,
content,
output: outputFile,
} ).then( min => {
writeFile( min, outputFile, scriptPathRelative )
} )
}
} )
Comment on lines +142 to +186
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Move the Stackable scan out of processSourceDir().

sourceDirs.forEach( processSourceDir ) invokes this block once per source root, so premium builds process the same Stackable files twice and race to overwrite the same dist/frontend/{interactions,actions} outputs. Please run this scan once, and mirror the earlier existsSync guard before each readdirSync.

💡 Suggested refactor
 const processSourceDir = sourceDir => {
 	console.log( `📁 Processing frontend scripts from ${ sourceDir }` )
@@
-	// Stackable intergration interaction types
-	fs.readdirSync( path.resolve( __dirname, '../src/integrations/stackable/interaction-types/frontend' ) )
-		.filter( file => file.endsWith( '.js' ) )
-		.forEach( async file => {
-			const type = file.replace( '.js', '' )
-			const scriptPath = path.resolve( __dirname, `../src/integrations/stackable//interaction-types/frontend/${ file }` )
-			const scriptPathRelative = path.relative( path.resolve( __dirname, '../' ), scriptPath )
-			const outputFile = path.resolve( __dirname, `../dist/frontend/interactions/${ type }.php` )
-			const content = fs.readFileSync( scriptPath, 'utf8' )
-
-			if ( buildType === 'development' ) {
-				writeFile( content, outputFile, scriptPathRelative )
-			} else {
-				await minify( {
-					compressor: uglifyJS,
-					content,
-					output: outputFile,
-				} ).then( min => {
-					writeFile( min, outputFile, scriptPathRelative )
-				} )
-			}
-		} )
-
-	// Stackable intergration action types
-	fs.readdirSync( path.resolve( __dirname, '../src/integrations/stackable/action-types/frontend' ) )
-		.filter( file => file.endsWith( '.js' ) )
-		.forEach( async file => {
-			const type = file.replace( '.js', '' )
-			const scriptPath = path.resolve( __dirname, `../src/integrations/stackable/action-types/frontend/${ file }` )
-			const scriptPathRelative = path.relative( path.resolve( __dirname, '../' ), scriptPath )
-			const outputFile = path.resolve( __dirname, `../dist/frontend/actions/${ type }.php` )
-			const content = fs.readFileSync( scriptPath, 'utf8' )
-
-			if ( buildType === 'development' ) {
-				writeFile( content, outputFile, scriptPathRelative )
-			} else {
-				await minify( {
-					compressor: uglifyJS,
-					content,
-					output: outputFile,
-				} ).then( min => {
-					writeFile( min, outputFile, scriptPathRelative )
-				} )
-			}
-		} )
 }
+
+const processStackableDirs = () => {
+	const stackableInteractionDir = path.resolve( __dirname, '../src/integrations/stackable/interaction-types/frontend' )
+	if ( fs.existsSync( stackableInteractionDir ) ) {
+		fs.readdirSync( stackableInteractionDir )
+			.filter( file => file.endsWith( '.js' ) )
+			.forEach( async file => {
+				const type = file.replace( '.js', '' )
+				const scriptPath = path.resolve( stackableInteractionDir, file )
+				const scriptPathRelative = path.relative( path.resolve( __dirname, '../' ), scriptPath )
+				const outputFile = path.resolve( __dirname, `../dist/frontend/interactions/${ type }.php` )
+				const content = fs.readFileSync( scriptPath, 'utf8' )
+				if ( buildType === 'development' ) {
+					writeFile( content, outputFile, scriptPathRelative )
+				} else {
+					await minify( { compressor: uglifyJS, content, output: outputFile } ).then( min => {
+						writeFile( min, outputFile, scriptPathRelative )
+					} )
+				}
+			} )
+	}
+
+	const stackableActionDir = path.resolve( __dirname, '../src/integrations/stackable/action-types/frontend' )
+	if ( fs.existsSync( stackableActionDir ) ) {
+		fs.readdirSync( stackableActionDir )
+			.filter( file => file.endsWith( '.js' ) )
+			.forEach( async file => {
+				const type = file.replace( '.js', '' )
+				const scriptPath = path.resolve( stackableActionDir, file )
+				const scriptPathRelative = path.relative( path.resolve( __dirname, '../' ), scriptPath )
+				const outputFile = path.resolve( __dirname, `../dist/frontend/actions/${ type }.php` )
+				const content = fs.readFileSync( scriptPath, 'utf8' )
+				if ( buildType === 'development' ) {
+					writeFile( content, outputFile, scriptPathRelative )
+				} else {
+					await minify( { compressor: uglifyJS, content, output: outputFile } ).then( min => {
+						writeFile( min, outputFile, scriptPathRelative )
+					} )
+				}
+			} )
+	}
+}
 
 // Process all source directories
 sourceDirs.forEach( processSourceDir )
+processStackableDirs()
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@scripts/generate-frontend-php-scripts.mjs` around lines 142 - 186, The
Stackable integration scan currently runs inside processSourceDir (triggered by
sourceDirs.forEach(processSourceDir)), causing duplicate processing and races;
move the two fs.readdirSync blocks that iterate the Stackable frontend
interaction-types and action-types out of processSourceDir so they execute once
during the top-level build flow, and before each readdirSync add an existsSync
guard (use fs.existsSync) to mirror the earlier pattern; ensure you keep the
same variables (type, scriptPath, scriptPathRelative, outputFile, content) and
continue calling writeFile/minify as before so behavior is unchanged except for
single-run scanning.

}

// Process all source directories
Expand Down
35 changes: 26 additions & 9 deletions src/action-types/frontend/backgroundColor.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,26 @@
/**
* This is the frontend script loaded in the frontend if the action is used.
*/

const BACKGROUND_COLOR_TARGET_SELECTORS = {
'core/cover': [ ' .wp-block-cover__background' ],
'core/button': [ ' .wp-element-button' ],
'stackable/blockquote': [ ' .stk-block-blockquote__content' ],
'stackable/button': [ ' .stk-button' ],
'stackable/call-to-action': [ ' .stk-block-call-to-action__content' ],
'stackable/card': [ ' .stk-block-card__content' ],
'stackable/hero': [ ' .stk-block-hero__content' ],
'stackable/image-box': [ ' .stk-block-image-box__content' ],
'stackable/notification': [ ' .stk-block-notification__content' ],
'stackable/number-box': [ ' .stk-block-number-box__container' ],
'stackable/pricing-box': [ ' .stk-block-pricing-box__content' ],
'stackable/testimonial': [ ' .stk-block-testimonial__content' ],
'stackable/accordion': [
' .stk-block-accordion__heading',
' .stk-block-accordion__content',
],
}

InteractRunner.addActionConfig( {
backgroundColor: {
initAction: action => {
Expand All @@ -9,16 +29,13 @@ InteractRunner.addActionConfig( {
} )
},
// TODO: We need to move this to PHP or else we will eventually have a TON of these.
blockElementSelector: ( selector, targetBlock ) => {
// For the cover block, the target is the background element.
if ( targetBlock.isBlock( 'core/cover' ) ) {
return `${ selector } > .wp-block-cover__background`
} else if ( targetBlock.isBlock( 'core/button' ) ) {
return `${ selector } > .wp-element-button`
} else if ( targetBlock.isBlock( 'stackable/button' ) ) {
return `${ selector } > .stk-button`
blockElementSelectors: ( selector, targetBlock ) => {
for ( const [ blockName, targetSuffixes ] of Object.entries( BACKGROUND_COLOR_TARGET_SELECTORS ) ) {
if ( targetBlock.isBlock( blockName ) ) {
return targetSuffixes.map( suffix => `${ selector }${ suffix }` )
}
}
return selector
return [ selector ]
},
initialStyles: action => {
return `background-color: ${ action.getValue( 'color' ) };`
Expand Down
31 changes: 25 additions & 6 deletions src/action-types/frontend/textColor.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,25 @@
/**
* This is the frontend script loaded in the frontend if the action is used.
*/

const TEXT_COLOR_TARGET_SELECTORS = {
'core/button': [ ' .wp-element-button' ],
'stackable/blockquote': [ ' .stk-block-blockquote__content' ],
'stackable/button': [ ' .stk-button__inner-text' ],
'stackable/call-to-action': [ ' .stk-block-call-to-action__content' ],
'stackable/card': [ ' .stk-block-card__content' ],
'stackable/hero': [ ' .stk-block-hero__content' ],
'stackable/image-box': [ ' .stk-block-image-box__content' ],
'stackable/notification': [ ' .stk-block-notification__content' ],
'stackable/number-box': [ ' .stk-block-number-box__container' ],
'stackable/pricing-box': [ ' .stk-block-pricing-box__content' ],
'stackable/testimonial': [ ' .stk-block-testimonial__content' ],
'stackable/accordion': [
' .stk-block-accordion__heading > .stk-block-column__content',
' .stk-block-accordion__content',
],
}

InteractRunner.addActionConfig( {
textColor: {
initAction: action => {
Expand All @@ -9,13 +28,13 @@ InteractRunner.addActionConfig( {
} )
},
// TODO: We need to move this to PHP or else we will eventually have a TON of these.
blockElementSelector: ( selector, targetBlock ) => {
if ( targetBlock.isBlock( 'core/button' ) ) {
return `${ selector } > .wp-element-button`
} else if ( targetBlock.isBlock( 'stackable/button' ) ) {
return `${ selector } .stk-button__inner-text`
blockElementSelectors: ( selector, targetBlock ) => {
for ( const [ blockName, targetSuffixes ] of Object.entries( TEXT_COLOR_TARGET_SELECTORS ) ) {
if ( targetBlock.isBlock( blockName ) ) {
return targetSuffixes.map( suffix => `${ selector }${ suffix }` )
}
}
return selector
return [ selector ]
},
initialStyles: action => {
return `color: ${ action.getValue( 'color' ) };`
Expand Down
2 changes: 2 additions & 0 deletions src/editor/editor.php
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ public function get_interaction_types_config() {
'entrance' => __( 'Entrance', 'interactions' ),
'keyboard' => __( 'Keyboard', 'interactions' ),
'misc' => __( 'Miscellaneous', 'interactions' ),
'stackable' => __( 'Stackable', 'interactions' ),
];

$page_categories = [
Expand Down Expand Up @@ -220,6 +221,7 @@ public function get_action_types_config() {
'flow' => __( 'Logic Flow', 'interactions' ),
'pageState' => __( 'Page State', 'interactions' ),
'misc' => __( 'Miscellaneous', 'interactions' ),
'stackable' => __( 'Stackable', 'interactions' ),
];

$action_categories = [];
Expand Down
55 changes: 33 additions & 22 deletions src/frontend/scripts/class-interaction.js
Original file line number Diff line number Diff line change
Expand Up @@ -146,22 +146,26 @@ export class Interaction {
let actionTargetSelector = this.getTargetsSelector( action.target, triggerSelector )

// TODO: Move this to the action class
// Run the blockElementSelector function if it exists. This function
// Run the blockElementSelectors function if it exists. This function
// allows us to target a specific element depending on the block.
if ( actionConfig.blockElementSelector && ( action.target.type === 'block' || action.target.type === 'block-name' || action.target.type === 'class' ) ) {
if ( actionConfig.blockElementSelectors && ( action.target.type === 'block' || action.target.type === 'block-name' || action.target.type === 'class' ) ) {
const blockName = action.target.type === 'block' ? action.target.blockName : action.target.value
actionTargetSelector = actionConfig.blockElementSelector( actionTargetSelector, new TargetBlock( blockName ) )
actionTargetSelector = actionConfig.blockElementSelectors( actionTargetSelector, new TargetBlock( blockName ) )
}

// If we're in the editor, don't set the initial styles
// unless the action is clicked.
if ( actionConfig.initialStyles && this.runner.isFrontend ) {
const actionTargetSelectors = Array.isArray( actionTargetSelector )
? actionTargetSelector
: [ actionTargetSelector ]

if ( actionConfig.initialStyles ) {
const styles = actionConfig.initialStyles( action )
if ( ! cssObject[ actionTargetSelector ] ) {
cssObject[ actionTargetSelector ] = []
}
if ( styles ) {
cssObject[ actionTargetSelector ].push( styles )
for ( const selector of actionTargetSelectors ) {
if ( ! cssObject[ selector ] ) {
cssObject[ selector ] = []
}
if ( styles ) {
cssObject[ selector ].push( styles )
}
}
}
} )
Expand Down Expand Up @@ -459,7 +463,7 @@ export class Interaction {
return `.wp-block-${ blockName.replace( '/', '-' ) }`
}

// Run the blockElementSelector function if it exists. Allow each action to
// Run the blockElementSelectors function if it exists. Allow each action to
// target a specific element depending on the block if needed. For example,
// for the cover block, the background color would need to be an inside
// element.
Expand All @@ -468,17 +472,24 @@ export class Interaction {
if ( ! actionConfig ) {
return targets
}
return targets
.map( el => {
if ( actionConfig.blockElementSelector ) {
const selector = actionConfig.blockElementSelector( ':scope', new TargetBlock( el ) )
if ( selector !== ':scope' ) {
return el.querySelector( selector ) || el // Make sure this is never null or the editor will error.

return targets.flatMap( el => {
if ( actionConfig.blockElementSelectors ) {
let selectors = actionConfig.blockElementSelectors( ':scope', new TargetBlock( el ) )
selectors = Array.isArray( selectors ) ? selectors : [ selectors ]

const elements = selectors.flatMap( selector => {
if ( selector === ':scope' ) {
return [ el ]
}
}
return el
} )
.filter( el => el !== null && el !== undefined ) // Ensure only valid elements are included
return Array.from( el.querySelectorAll( selector ) )
} )

return elements.length ? elements : [ el ]
}

return [ el ]
} )
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<?php
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}

if ( ! class_exists( 'Interact_Action_Type_Stackable_Accordion_Toggle' ) ) {
class Interact_Action_Type_Stackable_Accordion_Toggle extends Interact_Abstract_Action_Type {
public function initialize() {
$this->name = 'stackableAccordionToggle';
$this->category = 'stackable';
$this->type = 'time';

$this->label = __( 'Stackable Accordion Toggle', 'interactions' );
$this->description = __( 'Toggle a Stackable Accordion', 'interactions' );

$this->keywords = [];

$this->properties = [
'stateAction' => [
'name' => __( 'What action to apply', 'interactions' ),
'type' => 'select',
'default' => 'toggle',
'options' => [
[ 'label' => __( 'Toggle (both Open & Close)', 'interactions' ), 'value' => 'toggle' ],
[ 'label' => __( 'Open', 'interactions' ), 'value' => 'open' ],
[ 'label' => __( 'Close', 'interactions' ), 'value' => 'close' ],
],
],
];

$this->has_starting_state = false;
$this->has_preview = false;
$this->has_duration = false;
$this->has_easing = false;
}
}

interact_add_action_type( 'stackableAccordionToggle', 'Interact_Action_Type_Stackable_Accordion_Toggle' );
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<?php
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}

if ( ! class_exists( 'Interact_Action_Type_Stackable_Carousel_Change_Slide' ) ) {
class Interact_Action_Type_Stackable_Carousel_Change_Slide extends Interact_Abstract_Action_Type {
public function initialize() {
$this->name = 'stackableCarouselChangeSlide';
$this->category = 'stackable';
$this->type = 'time';

$this->label = __( 'Stackable Carousel Change Slide', 'interactions' );
$this->description = __( 'Change the current slide of the Stackable Carousel', 'interactions' );

$this->keywords = [];

$this->properties = [
'slide' => [
'name' => __( 'Slide', 'interactions' ),
'type' => 'number',
'default' => '',
'min' => 1,
'max' => 10,
'step' => 1,
'help' => __( 'The slide number to change into. Leave this blank to change into the next slide.', 'interactions' ),
],
];

$this->has_starting_state = false;
$this->has_preview = false;
$this->has_duration = false;
$this->has_easing = false;
}
}

interact_add_action_type( 'stackableCarouselChangeSlide', 'Interact_Action_Type_Stackable_Carousel_Change_Slide' );
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<?php
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}

if ( ! class_exists( 'Interact_Action_Type_Stackable_Count_Up_Reset' ) ) {
class Interact_Action_Type_Stackable_Count_Up_Reset extends Interact_Abstract_Action_Type {
public function initialize() {
$this->name = 'stackableCountUpReset';
$this->category = 'stackable';
$this->type = 'time';

$this->label = __( 'Stackable Count Up Reset', 'interactions' );
$this->description = __( 'Reset the Stackable Count Up', 'interactions' );

$this->keywords = [];

$this->has_starting_state = false;
$this->has_preview = false;
$this->has_duration = false;
$this->has_easing = false;
}
}

interact_add_action_type( 'stackableCountUpReset', 'Interact_Action_Type_Stackable_Count_Up_Reset' );
}
Loading
Loading