Dispatch Functions

Dispatch functions are used to modify state in Divi 5 stores. These functions trigger actions that update the application state, such as editing modules, managing UI state, and handling user interactions.

Edit Post Store

`dispatch('divi/edit-post').editModuleAttribute(params)`

Edit a specific attribute of a module. This is the primary function for updating module content and settings.

Parameters:

Parameter	Type	Required	Description
`id`	`string`	Yes	The module ID to edit
`attrName`	`string`	Yes	The attribute path using dot notation (e.g., `'content.innerContent'`)
`value`	`object \\| string`	Yes	The new value (responsive format recommended)
`subName`	`string \\| false`	Recommended	The sub-path being changed, or `false` to replace the entire attribute. Required for global layouts.
`layoutContext`	`string`	No	Optional layout context for global layouts

Critical Requirements

To avoid data corruption and ensure proper functionality:

Use full attribute paths for module content:
- Correct: 'content.innerContent'
- Wrong: 'content' (overwrites entire content structure)
Use responsive value format for module content:
- Correct: { desktop: { value: 'your content' } }
- Wrong: 'your content' (plain string may cause issues)
Include subName parameter:
- Required for global layouts and proper sync
- Use false when replacing entire attribute values
- Use specific path (e.g., 'desktop.value') when updating nested properties

Note: While basic attribute updates may work without subName, omitting it can cause issues with global layout synchronization and may lead to unexpected behavior.

// Example 1: Edit text module content (recommended approach)
dispatch('divi/edit-post').editModuleAttribute({
  id: 'module-123',
  attrName: 'content.innerContent',
  value: {
    desktop: {
      value: '<p>Hello World</p>'
    }
  },
  subName: false, // false = replacing entire innerContent value
});

// Example 2: Edit nested attribute with responsive format
dispatch('divi/edit-post').editModuleAttribute({
  id: 'module-123',
  attrName: 'module.advanced.columnStructure',
  value: {
    desktop: {
      value: '1_3,2_3'
    }
  },
  subName: false,
});

// Example 3: Update specific nested property (granular update)
// Get current value first to preserve other breakpoints
const currentValue = select('divi/edit-post').getModuleAttr(
  'module-123', 
  'content.innerContent'
);

dispatch('divi/edit-post').editModuleAttribute({
  id: 'module-123',
  attrName: 'content.innerContent',
  value: currentValue.setIn(['desktop', 'value'], 'New desktop content'),
  subName: 'desktop.value', // Specific path for granular update
});

// Example 4: Edit with global layout context
dispatch('divi/edit-post').editModuleAttribute({
  id: 'module-123',
  attrName: 'content.innerContent',
  value: {
    desktop: {
      value: 'Updated content'
    }
  },
  subName: false, // Required when using layoutContext
  layoutContext: 'global-layout'
});

Getting Current Values

Before editing, retrieve the current attribute value to understand its structure:

// Get full attribute structure
const currentContent = select('divi/edit-post').getModuleAttr(
  moduleId, 
  'content.innerContent'
);

// Access specific breakpoint value
console.log(currentContent?.desktop?.value); // Current desktop content

// For Immutable.js objects, use .getIn()
const desktopValue = currentContent?.getIn(['desktop', 'value']);

Common Mistakes That Corrupt Data

Mistake 1: Using wrong attribute path

// WRONG - Overwrites entire content object
dispatch('divi/edit-post').editModuleAttribute({
  id: moduleId,
  attrName: 'content', // Missing .innerContent
  value: 'New content',
});
// Result: Replaces {innerContent: {...}} with plain string

Mistake 2: Missing responsive format

// WRONG - Plain string instead of responsive object
dispatch('divi/edit-post').editModuleAttribute({
  id: moduleId,
  attrName: 'content.innerContent',
  value: 'New content', // Should be { desktop: { value: '...' } }
  subName: false,
});
// Result: May work but breaks responsive editing

Mistake 3: Omitting subName in global layouts

// WRONG - Missing subName in global layout context
dispatch('divi/edit-post').editModuleAttribute({
  id: moduleId,
  attrName: 'content.innerContent',
  value: { desktop: { value: 'content' } },
  // Missing: subName: false
  layoutContext: 'global-layout'
});
// Result: Global layout sync may fail

`dispatch('divi/edit-post').addModule(id, moduleName, props, position, newId?, layoutContext?)`

Add a new module to the page content. Used for inserting modules at specific positions.

// Add a text module inside a column
dispatch('divi/edit-post').addModule(
  'column-id',
  'divi/text',
  { content: 'New text content' },
  'inside'
);

// Add a section after another section
dispatch('divi/edit-post').addModule(
  'section-id',
  'divi/section',
  {},
  'after'
);

// Add with custom module ID
dispatch('divi/edit-post').addModule(
  'parent-id',
  'divi/button',
  { content: 'Click me' },
  'inside',
  'custom-button-id'
);

// Add in global layout context
dispatch('divi/edit-post').addModule(
  'parent-id',
  'divi/text',
  {},
  'inside',
  'new-id',
  'global-layout'
);

`dispatch('divi/edit-post').removeModule(moduleId, layoutContext?)`

Remove a module from the page content.

// Remove a module
dispatch('divi/edit-post').removeModule('module-123');

// Remove with global layout context
dispatch('divi/edit-post').removeModule('module-123', 'global-layout');

`dispatch('divi/edit-post').removeModuleAttribute(moduleId, attrName, layoutContext?)`

Remove a specific attribute from a module.

// Remove a module attribute
dispatch('divi/edit-post').removeModuleAttribute(
  'module-123',
  'module.advanced.open'
);

// Remove with global layout context
dispatch('divi/edit-post').removeModuleAttribute(
  'module-123',
  'content',
  'global-layout'
);

`dispatch('divi/edit-post').removeModuleAttributes(params)`

Remove multiple attributes from a module at once.

// Remove multiple attributes
dispatch('divi/edit-post').removeModuleAttributes({
  id: 'module-1',
  attrNames: [
    'module.decoration.background',
    'module.decoration.filter'
  ]
});

`dispatch('divi/edit-post').moveModule(moduleId, position, targetId, layoutContext?)`

Move a module to a different position in the page structure.

// Move module before another module
dispatch('divi/edit-post').moveModule(
  'module-1',
  'before',
  'module-2'
);

// Move module inside a container
dispatch('divi/edit-post').moveModule(
  'module-1',
  'inside',
  'column-1'
);

// Move to end of container
dispatch('divi/edit-post').moveModule(
  'module-1',
  'end',
  'section-1'
);

// Move with layout context
dispatch('divi/edit-post').moveModule(
  'module-1',
  'after',
  'module-2',
  'global-layout'
);

`dispatch('divi/edit-post').moveModules(moduleIds, position, targetId)`

Move multiple modules simultaneously to a new position.

// Move multiple modules
dispatch('divi/edit-post').moveModules(
  ['module-1', 'module-2', 'module-3'],
  'before',
  'target-module'
);

// Move to after position
dispatch('divi/edit-post').moveModules(
  ['module-1', 'module-2'],
  'after',
  'section-1'
);

Page Settings Store

`dispatch('divi/page-settings').update(settingName, value)`

Update page-level settings such as custom CSS, page title, or other page configurations.

// Update page title
dispatch('divi/page-settings').update('pageTitle', 'New Page Title');

// Update custom CSS
dispatch('divi/page-settings').update('customCSS', '.my-class { color: red; }');

// Update post image URL
dispatch('divi/page-settings').update('postImageUrl', 'https://example.com/image.jpg');

App UI Store

`dispatch('divi/app-ui').setView(viewMode)`

Change the current view mode in the visual builder.

// Set to desktop view
dispatch('divi/app-ui').setView('desktop');

// Set to mobile view
dispatch('divi/app-ui').setView('phone');

// Set to tablet view
dispatch('divi/app-ui').setView('tablet');

// Set to wireframe view
dispatch('divi/app-ui').setView('wireframe');

`dispatch('divi/app-ui').setAttributeState(state)`

Change the current attribute state for editing responsive and interactive states.

// Set to hover state
dispatch('divi/app-ui').setAttributeState('hover');

// Set to sticky state
dispatch('divi/app-ui').setAttributeState('sticky');

// Reset to default value state
dispatch('divi/app-ui').setAttributeState('value');

`dispatch('divi/app-ui').setElementProperty(params)`

Update properties of UI elements like dimensions, visibility, etc.

// Set sidebar width
dispatch('divi/app-ui').setElementProperty({
  elementName: 'sidebarRight',
  propertyGroup: 'dimension',
  propertyName: 'width',
  value: 300
});

// Set element visibility
dispatch('divi/app-ui').setElementVisibility({
  elementName: 'builderBar',
  visible: true
});

`dispatch('divi/app-ui').setAppFrameZoom(params)`

Control the zoom level of the visual builder frame.

// Set zoom to 75%
dispatch('divi/app-ui').setAppFrameZoom({
  zoom: 75,
  transition: true
});

// Set zoom to fit width
dispatch('divi/app-ui').setAppFrameZoom({
  zoom: 'fit-width'
});

`dispatch('divi/app-ui').setWindow(params)`

Update window properties like dimensions and scroll position.

// Set window dimensions
dispatch('divi/app-ui').setWindow({
  width: 1200,
  height: 800
});

// Update scroll position
dispatch('divi/app-ui').setWindow({
  scrollTop: 100
});

`dispatch('divi/app-ui').addSidebarRow(params)`

Add a new row to the sidebar for modal management.

// Add sidebar row
dispatch('divi/app-ui').addSidebarRow({
  name: 'custom-row',
  position: 'bottom'
});

`dispatch('divi/app-ui').dockModalToSidebarRow(params)`

Dock a modal to a specific sidebar row.

// Dock modal to sidebar row
dispatch('divi/app-ui').dockModalToSidebarRow({
  modalName: 'module-settings',
  sidebarRowName: 'main-row',
  sidebarName: 'right'
});

`dispatch('divi/modal-library').open(params)`

Open a modal with specific configuration.

// Open module settings modal
dispatch('divi/modal-library').open({
  modalName: 'divi/module',
  moduleId: 'module-123'
});

// Open page settings modal
dispatch('divi/modal-library').open({
  modalName: 'divi/page-settings'
});

// Open layers modal
dispatch('divi/modal-library').open({
  modalName: 'divi/layers'
});

// Open color picker modal with options
dispatch('divi/modal-library').open({
  modalName: 'color-picker',
  moduleId: 'module-123',
  options: { 
    fieldName: 'backgroundColor' 
  }
});

`dispatch('divi/modal-library').close(params)`

Close a specific modal.

// Close module settings modal
dispatch('divi/modal-library').close({
  modalName: 'divi/module'
});

// Close all modals
dispatch('divi/modal-library').close({
  modalName: 'all'
});

Global Data Store

`dispatch('divi/global-data').updateGlobalColor(params)`

Update an existing global color.

// Update global color
dispatch('divi/global-data').updateGlobalColor({
  id: 'color-123',
  value: '#ff0000'
});

// Update color with name
dispatch('divi/global-data').updateGlobalColor({
  id: 'color-123',
  value: '#ff0000',
  name: 'Primary Red'
});

`dispatch('divi/global-data').addGlobalColor(params)`

Add a new global color to the system.

// Add new global color
dispatch('divi/global-data').addGlobalColor({
  name: 'Brand Blue',
  value: '#0066cc',
  id: generateId()
});

`dispatch('divi/global-data').deleteGlobalColor(colorId)`

Delete a global color from the system.

// Delete global color
dispatch('divi/global-data').deleteGlobalColor('color-123');

Events Store

`dispatch('divi/events').clearSelection()`

Clear all currently selected modules.

// Clear module selection
dispatch('divi/events').clearSelection();

`dispatch('divi/events').selectModule(moduleId)`

Select a specific module in the visual builder.

// Select a module
dispatch('divi/events').selectModule('module-123');

Fonts Store

`dispatch('divi/fonts').loadFont(fontName)`

Load a specific font for use in the visual builder.

// Load a Google Font
dispatch('divi/fonts').loadFont('Roboto');

// Load a custom font
dispatch('divi/fonts').loadFont('MyCustomFont');

Performance Tips

Batch multiple related dispatch calls when possible to minimize re-renders
Use layout context parameters when working with global layouts
Always provide proper type annotations for dispatch parameters

State Management

Dispatch functions modify global state - use them carefully
Some actions may trigger cascading effects and additional state updates
Always validate input parameters before dispatching actions

Got a question or feedback? Ask away!

Dispatch Functions

Edit Post Store​

dispatch('divi/edit-post').editModuleAttribute(params)​

dispatch('divi/edit-post').addModule(id, moduleName, props, position, newId?, layoutContext?)​

dispatch('divi/edit-post').removeModule(moduleId, layoutContext?)​

dispatch('divi/edit-post').removeModuleAttribute(moduleId, attrName, layoutContext?)​

dispatch('divi/edit-post').removeModuleAttributes(params)​

dispatch('divi/edit-post').moveModule(moduleId, position, targetId, layoutContext?)​

dispatch('divi/edit-post').moveModules(moduleIds, position, targetId)​

Page Settings Store​

dispatch('divi/page-settings').update(settingName, value)​

App UI Store​

dispatch('divi/app-ui').setView(viewMode)​

dispatch('divi/app-ui').setAttributeState(state)​

dispatch('divi/app-ui').setElementProperty(params)​

dispatch('divi/app-ui').setAppFrameZoom(params)​

dispatch('divi/app-ui').setWindow(params)​

dispatch('divi/app-ui').addSidebarRow(params)​

dispatch('divi/app-ui').dockModalToSidebarRow(params)​

Modal Library Store​

dispatch('divi/modal-library').open(params)​

dispatch('divi/modal-library').close(params)​

Global Data Store​

dispatch('divi/global-data').updateGlobalColor(params)​

dispatch('divi/global-data').addGlobalColor(params)​

dispatch('divi/global-data').deleteGlobalColor(colorId)​

Events Store​

dispatch('divi/events').clearSelection()​

dispatch('divi/events').selectModule(moduleId)​

Fonts Store​

dispatch('divi/fonts').loadFont(fontName)​