setIsOpen( false ) }
+ aria-hidden="true"
+ />
+ ) } */ }
+
+
+
+
+ { __( 'Interactions', 'interactions' ) }
+
+
+
+
+
+ )
+ }
+
+ const mountNode = document.createElement( 'div' )
+ mountNode.id = mountNodeId
+ mountNode.className = 'interact-builder-root interact-elementor-root'
+ document.body.appendChild( mountNode )
+ document.body.classList.add( 'interact-builder-editor' )
+ document.body.classList.add( 'interact-elementor-editor' )
+ this.registerSelectionTracking()
+ createRoot( mountNode ).render(
)
+
+ return super.init()
+ }
+
+ // Return the Elementor preview canvas document.
+ getCanvasDocument() {
+ const iframe = document.querySelector( '#elementor-preview-iframe' )
+ return iframe?.contentDocument || null
+ }
+
+ // Open the Interactions sidebar in Elementor.
+ openPanel() {
+ window.dispatchEvent( new CustomEvent( 'interact/open-elementor-sidebar' ) )
+ return null
+ }
+
+ getWidgetContentTargetSelector( targetElement, elementId ) {
+ if ( ! targetElement || ! elementId ) {
+ return ''
+ }
+
+ const interactiveDescendant = targetElement.querySelector( `[data-interaction-id="${ elementId }"]` )
+ if ( interactiveDescendant ) {
+ return `[data-interaction-id="${ elementId }"]`
+ }
+
+ return ''
+ }
+
+ // Build an interaction target from a selected Elementor element.
+ buildTargetFromElement( element, targetType = 'selector' ) {
+ if ( ! element ) {
+ return null
+ }
+
+ const targetElement = element.closest( '.elementor-element[data-id]' )
+ if ( ! targetElement ) {
+ return null
+ }
+
+ const elementId = targetElement.getAttribute( 'data-id' )
+ if ( ! elementId ) {
+ return null
+ }
+
+ const elementType = targetElement.getAttribute( 'data-element_type' ) || ''
+ const widgetType = targetElement.getAttribute( 'data-widget_type' ) || ''
+ const label = widgetType || elementType || 'elementor-element'
+ const wrapperSelector = `.elementor-element.elementor-element-${ elementId }`
+ const classValue = `elementor-element-${ elementId }`
+ const widgetContentSelector = elementType === 'widget'
+ ? this.getWidgetContentTargetSelector( targetElement, elementId )
+ : ''
+ const targetTargetType = targetType === 'class' && widgetContentSelector
+ ? 'selector'
+ : targetType
+ const targetValue = targetTargetType === 'class'
+ ? classValue
+ : elementType === 'widget'
+ ? widgetContentSelector || wrapperSelector
+ : wrapperSelector
+
+ return {
+ type: targetTargetType,
+ value: targetValue,
+ blockName: label,
+ }
+ }
+
+ getHighlightElement( element ) {
+ if ( ! element ) {
+ return null
+ }
+
+ const targetElement = element.closest( '.elementor-element[data-id]' )
+ if ( ! targetElement ) {
+ return null
+ }
+
+ const elementType = targetElement.getAttribute( 'data-element_type' ) || ''
+ if ( elementType !== 'widget' ) {
+ return targetElement
+ }
+
+ return targetElement.firstElementChild || targetElement
+ }
+
+ // Return the currently selected Elementor target.
+ getCurrentSelectedTarget() {
+ return this.buildTargetFromElement( this.selectedElement?.element || null )
+ }
+
+ // Track the current Elementor selection from the editor panel.
+ registerSelectionTracking() {
+ if ( ! window.elementor?.hooks?.addAction ) {
+ return NOOP
+ }
+
+ const register = action => {
+ window.elementor.hooks.addAction( action, ( panel, model, view ) => {
+ this.selectedElement = {
+ model,
+ view,
+ element: view?.$el?.get?.( 0 ) || null,
+ }
+ } )
+ }
+
+ const actions = [
+ 'panel/open_editor/section',
+ 'panel/open_editor/column',
+ 'panel/open_editor/container',
+ 'panel/open_editor/widget',
+ ]
+ actions.forEach( register )
+
+ return NOOP
+ }
+
+ // Start an Elementor preview picker for selector or class targets.
+ startElementPicker( {
+ targetType = 'selector',
+ onPick = NOOP,
+ onCancel = NOOP,
+ } = {} ) {
+ const previewDocument = this.getCanvasDocument()
+ if ( ! previewDocument ) {
+ onCancel()
+ return NOOP
+ }
+
+ let highlightedElement = null
+
+ // Restore the previously highlighted element back to its original outline.
+ const clearHighlight = () => {
+ if ( highlightedElement ) {
+ highlightedElement.style.outline = highlightedElement.dataset.interactPrevOutline || ''
+ highlightedElement.style.outlineOffset = highlightedElement.dataset.interactPrevOutlineOffset || ''
+ delete highlightedElement.dataset.interactPrevOutline
+ delete highlightedElement.dataset.interactPrevOutlineOffset
+ }
+ highlightedElement = null
+ }
+
+ // Follow the pointer inside the preview and visually mark the current pick candidate.
+ const mouseMoveHandler = event => {
+ const candidate = event.target.closest( '.elementor-element[data-id]' )
+ const highlightCandidate = this.getHighlightElement( candidate )
+ if ( highlightCandidate === highlightedElement ) {
+ return
+ }
+ clearHighlight()
+ if ( highlightCandidate ) {
+ highlightedElement = highlightCandidate
+ highlightedElement.dataset.interactPrevOutline = highlightedElement.style.outline || ''
+ highlightedElement.dataset.interactPrevOutlineOffset = highlightedElement.style.outlineOffset || ''
+ highlightedElement.style.outline = '2px solid #05f'
+ highlightedElement.style.outlineOffset = '2px'
+ }
+ }
+
+ // Convert the clicked Elementor element into an interaction target and stop pick mode.
+ const clickHandler = event => {
+ const candidate = event.target.closest( '.elementor-element[data-id]' )
+ if ( ! candidate ) {
+ return
+ }
+ event.preventDefault()
+ event.stopPropagation()
+ const target = this.buildTargetFromElement( candidate, targetType )
+ stop()
+ if ( target ) {
+ onPick( target )
+ } else {
+ onCancel()
+ }
+ }
+
+ // Allow canceling the picker with Escape.
+ const keyHandler = event => {
+ if ( event.key === 'Escape' ) {
+ stop()
+ onCancel()
+ }
+ }
+
+ // Remove all temporary picker listeners and preview highlighting.
+ const stop = () => {
+ clearHighlight()
+ previewDocument.removeEventListener( 'mousemove', mouseMoveHandler, true )
+ previewDocument.removeEventListener( 'click', clickHandler, true )
+ previewDocument.removeEventListener( 'keydown', keyHandler, true )
+ document.removeEventListener( 'keydown', keyHandler, true )
+ }
+
+ previewDocument.addEventListener( 'mousemove', mouseMoveHandler, true )
+ previewDocument.addEventListener( 'click', clickHandler, true )
+ previewDocument.addEventListener( 'keydown', keyHandler, true )
+ document.addEventListener( 'keydown', keyHandler, true )
+
+ return stop
+ }
+}
+
+export default ElementorInteractionsEditor
diff --git a/src/editor/editors/gutenberg.js b/src/editor/editors/gutenberg.js
new file mode 100644
index 0000000..4edf85d
--- /dev/null
+++ b/src/editor/editors/gutenberg.js
@@ -0,0 +1,119 @@
+import IconSVG from '../assets/icon.svg'
+import InteractionsApp from '../app'
+import InteractionsEditorAbstract from './abstract'
+
+import { registerPlugin } from '@wordpress/plugins'
+import { __ } from '@wordpress/i18n'
+import {
+ useSelect,
+ dispatch,
+ select,
+} from '@wordpress/data'
+
+// Gutenberg editor adapter.
+class GutenbergInteractionsEditor extends InteractionsEditorAbstract {
+ getEditorMode() {
+ return 'gutenberg'
+ }
+
+ // Register the Gutenberg sidebar plugin.
+ init() {
+ if ( this.initialized ) {
+ return this
+ }
+
+ const GutenbergInteractionsEditorComponent = () => {
+ const SideEditorPluginSidebar = window.wp.editSite?.PluginSidebar
+ const PostEditorPluginSidebar = window.wp.editPost?.PluginSidebar
+ const SideBar = SideEditorPluginSidebar ? SideEditorPluginSidebar
+ : PostEditorPluginSidebar ? PostEditorPluginSidebar : null
+
+ const selectedBlockAnchor = useSelect( select => {
+ const clientId = select( 'core/block-editor' )?.getSelectedBlockClientId?.()
+ return clientId ? select( 'core/block-editor' ).getBlockAttributes( clientId )?.anchor : null
+ }, [] )
+
+ if ( ! SideBar ) {
+ return null
+ }
+
+ return (
+
}
+ >
+
+
+ )
+ }
+
+ registerPlugin( 'interact-editor', {
+ render: GutenbergInteractionsEditorComponent,
+ } )
+
+ return super.init()
+ }
+
+ // Return the Gutenberg editor canvas document.
+ getCanvasDocument() {
+ const iframe = document.querySelector( 'iframe[name="editor-canvas"]' )
+ return iframe?.contentDocument || document
+ }
+
+ // Open the Interactions sidebar in Gutenberg.
+ openPanel() {
+ if ( dispatch( 'core/edit-post' ) ) {
+ return dispatch( 'core/edit-post' ).openGeneralSidebar( 'interact-editor/sidebar' )
+ }
+ return dispatch( 'core/edit-site' ).openGeneralSidebar( 'interact-editor/sidebar' )
+ }
+
+ // Return the currently selected block anchor.
+ getSelectedBlockAnchor() {
+ const blockEditorStore = select( 'core/block-editor' )
+ if ( ! blockEditorStore?.getSelectedBlockClientId ) {
+ return null
+ }
+ const clientId = blockEditorStore.getSelectedBlockClientId()
+ return clientId ? blockEditorStore.getBlockAttributes( clientId )?.anchor : null
+ }
+
+ // Return the current Gutenberg selection as an interaction target.
+ getCurrentSelectedTarget() {
+ const blockEditorStore = select( 'core/block-editor' )
+ const clientId = blockEditorStore?.getSelectedBlockClientId?.()
+ if ( ! clientId ) {
+ return null
+ }
+
+ const block = blockEditorStore.getBlock?.( clientId )
+ if ( ! block ) {
+ return null
+ }
+
+ const hasAnchorAttribute = !! select( 'core/blocks' ).getBlockType( block.name )?.attributes?.anchor
+ if ( hasAnchorAttribute ) {
+ return {
+ type: 'block',
+ value: this.getSelectedBlockAnchor() || '',
+ blockName: block.name || '',
+ options: { clientId },
+ }
+ }
+
+ const className = block.attributes?.className?.split( ' ' )?.[ 0 ] || ''
+ return {
+ type: 'class',
+ value: className,
+ blockName: block.name || '',
+ options: { clientId },
+ }
+ }
+}
+
+export default GutenbergInteractionsEditor
diff --git a/src/editor/editors/index.js b/src/editor/editors/index.js
new file mode 100644
index 0000000..fba10b5
--- /dev/null
+++ b/src/editor/editors/index.js
@@ -0,0 +1,49 @@
+import { editorMode } from 'interactions'
+import GutenbergInteractionsEditor from './gutenberg'
+import ElementorInteractionsEditor from './elementor'
+import BricksInteractionsEditor from './bricks'
+
+let activeEditor = null
+
+// Create the active editor adapter for the current editor environment.
+const createInteractionsEditor = () => {
+ return editorMode === 'elementor'
+ ? new ElementorInteractionsEditor()
+ : editorMode === 'bricks'
+ ? new BricksInteractionsEditor()
+ : new GutenbergInteractionsEditor()
+}
+
+// Return the memoized editor adapter instance.
+export const getInteractionsEditor = () => {
+ if ( ! activeEditor ) {
+ activeEditor = createInteractionsEditor()
+ }
+ return activeEditor
+}
+
+export const getEditorMode = () => getInteractionsEditor().getEditorMode()
+
+export const isElementorEditor = () => getInteractionsEditor().isElementor()
+
+export const isBricksEditor = () => getInteractionsEditor().isBricks()
+
+export const isGutenbergEditor = () => getInteractionsEditor().isGutenberg()
+
+export const isBuilderEditor = () => getInteractionsEditor().isBuilder()
+
+export const getCurrentEditorPostContext = () => getInteractionsEditor().getCurrentPostContext()
+
+export const getSelectedBlockAnchor = () => getInteractionsEditor().getSelectedBlockAnchor()
+
+export const getEditorCanvasDocument = () => getInteractionsEditor().getCanvasDocument()
+
+export const getEditorCanvasElement = () => getInteractionsEditor().getCanvasElement()
+
+export const openInteractionsSidebar = () => getInteractionsEditor().openInteractionsPanel()
+
+export const getCurrentSelectedTarget = () => getInteractionsEditor().getCurrentSelectedTarget()
+
+export const registerEditorSelectionTracking = () => getInteractionsEditor().registerSelectionTracking()
+
+export const startEditorElementPicker = args => getInteractionsEditor().startElementPicker( args )
diff --git a/src/editor/hooks/use-interactions.js b/src/editor/hooks/use-interactions.js
index c007ebb..a8ac4d9 100644
--- a/src/editor/hooks/use-interactions.js
+++ b/src/editor/hooks/use-interactions.js
@@ -10,6 +10,7 @@ import { domReady } from '~interact/shared/dom-ready.js'
import apiFetch from '@wordpress/api-fetch'
import { __ } from '@wordpress/i18n'
import { ensureInteractionDefaults } from '../util'
+import { getCurrentEditorPostContext, getEditorMode } from '~interact/editor/editors'
const DEFAULT_STATE = {
interactions: [],
@@ -92,16 +93,12 @@ register( createReduxStore( 'interact/interactions', {
* Whether or not the interaction should be shown in the editor based on what's
* currently beign edited in the Block Editor.
*
- * @param {Array} interaction
- * @param {Object} select wp.data.select
+ * @param {Array} interaction
*
* @return {boolean} Whether or not the interaction should be shown in the editor.
*/
-export const isInteractionShown = ( interaction, select ) => {
- // If the editor is not available (e.g. in Widgets editor), don't do anything.
- if ( ! select( 'core/editor' ) ) {
- return false
- }
+export const isInteractionShown = interaction => {
+ const currentContext = getCurrentEditorPostContext()
return interaction.locations.some( locationGroup => {
return locationGroup.every( location => {
const {
@@ -113,15 +110,15 @@ export const isInteractionShown = ( interaction, select ) => {
case 'page': {
// If blank, then it's all posts/pages.
if ( ! value || isNaN( +value ) ) {
- const postType = select( 'core/editor' ).getCurrentPostType()
+ const postType = currentContext.postType
const postTypeParam = value || param
return operator === '==' ? postType === postTypeParam : postType !== postTypeParam
}
- const match = value.toString() === select( 'core/editor' ).getCurrentPostId()?.toString()
+ const match = value.toString() === currentContext.postId?.toString()
return operator === '==' ? match : ! match
}
case 'post_type': {
- const match = value.toString() === select( 'core/editor' ).getCurrentPostType()?.toString()
+ const match = value.toString() === currentContext.postType?.toString()
return operator === '==' ? match : ! match
}
case 'post_status':
@@ -131,20 +128,20 @@ export const isInteractionShown = ( interaction, select ) => {
return true
case 'post_template':
case 'page_template': {
- const match = value.toString() === select( 'core/editor' ).getCurrentPost()?.template.toString()
+ const match = value.toString() === currentContext.postTemplate?.toString()
return operator === '==' ? match : ! match
}
case 'post_parent':
case 'page_parent': {
- const match = value.toString() === select( 'core/editor' ).getCurrentPost()?.parent.toString()
+ const match = value.toString() === currentContext.postParent?.toString()
return operator === '==' ? match : ! match
}
case 'all': // Entire website
return true
case 'wp_template': // Site editor templates: home, 404, etc
- const currentPostType = select( 'core/editor' ).getCurrentPostType()
+ const currentPostType = currentContext.postType
if ( currentPostType === 'wp_template' ) {
- const match = value.toString() === select( 'core/editor' ).getCurrentPostId()?.toString()
+ const match = value.toString() === currentContext.postId?.toString()
return operator === '==' ? match : ! match
}
break
@@ -177,7 +174,7 @@ const useInteractions = () => {
const updateInteraction = newInteraction => {
// Check if we updated any anchors/attributes, if we did, then we need to ask whether to also update the post.
const didModifyPostContent = select( 'interact/interactions' ).didModifyPostContent()
- if ( didModifyPostContent ) {
+ if ( didModifyPostContent && getEditorMode() === 'gutenberg' ) {
if ( confirm( __( 'Some block anchors have been updated for your interactions to work correctly. Do you want to save these post changes? (Any modified synced patterns will also be saved)', 'interactions' ) ) ) { // eslint-disable-line no-alert
dispatch( 'interact/interactions' ).setDidModifyPostContent( false )
// Save the post.
diff --git a/src/editor/plugins/index.js b/src/editor/plugins/index.js
index c448b35..f3af43f 100644
--- a/src/editor/plugins/index.js
+++ b/src/editor/plugins/index.js
@@ -1,4 +1,8 @@
-import './block-toolbar-button'
-import './top-toolbar-button'
-import './block-highlight'
-import './block-select'
+import { editorMode } from 'interactions'
+
+if ( editorMode === 'gutenberg' ) {
+ require( './block-toolbar-button' )
+ require( './top-toolbar-button' )
+ require( './block-highlight' )
+ require( './block-select' )
+}
diff --git a/src/editor/util/index.js b/src/editor/util/index.js
index d34bf05..c2356e5 100644
--- a/src/editor/util/index.js
+++ b/src/editor/util/index.js
@@ -6,6 +6,10 @@ import {
import { select, dispatch } from '@wordpress/data'
import { sprintf, __ } from '@wordpress/i18n'
import { addClientIdAnchorPair } from '../components/timeline/with-tracked-anchors'
+import {
+ getCurrentEditorPostContext,
+ openInteractionsSidebar,
+} from '~interact/editor/editors'
const getUniqueTitle = title => {
const interactions = select( 'interact/interactions' ).getInteractions()
@@ -52,12 +56,17 @@ const getBlockNameFromAnchor = anchor => {
// Returns the current page
export const getLocationForCurrentPage = () => {
- const currentPostType = select( 'core/editor' ).getCurrentPostType()
+ const {
+ postId,
+ postType,
+ } = getCurrentEditorPostContext()
+
+ const currentPostType = postType
let locationParam = currentPostType === 'page' ? 'page'
: currentPostType === 'wp_template' ? 'wp_template' // Site editor templates
: !! currentPostType ? 'post'
: null
- let locationValue = select( 'core/editor' ).getCurrentPostId()
+ let locationValue = postId
if ( ! locationParam ) {
locationParam = 'all'
@@ -382,14 +391,4 @@ export const getOrGenerateBlockClass = ( clientId, updateAttribute = true ) => {
return className
}
-/**
- * Utility function to open the Interactions sidebar.
- *
- * @return {Object} Dispatch action object
- */
-export const openInteractionsSidebar = () => {
- if ( dispatch( 'core/edit-post' ) ) {
- return dispatch( 'core/edit-post' ).openGeneralSidebar( 'interact-editor/sidebar' )
- }
- return dispatch( 'core/edit-site' ).openGeneralSidebar( 'interact-editor/sidebar' )
-}
+export { openInteractionsSidebar }