@wordpress/data Info

Last Updated on April 7, 2021 by Neil Murray

Actions #

Here are the list of data actions that can be used in components for reading or writing data.

updateTreeData ( obj treeData )
Update treeData state.

updateVisualState ( obj state )
This is the new function to update Visual state object. Other individual update state functions will be deprecated in favor of this function.

onChangeTreeData ( obj treeData )
Apply surrounding rules and update treeData state.

addNode ( obj node )
Add node at the end of treeData.

editNode ( obj rowInfo )
Edit a node from treeData. This will open Edit dialog if edit is enabled and set rowInfo across components.

duplicateNode ( obj rowInfo )
Duplicate a node from treeData. Duplicated node is added right after original node.

deleteNode ( obj rowInfo )
Delete a node from treeData. This will also close Edit dialog if open for this node.

changeNodeType ( DOM obj element, obj rowInfo )
Change node into other CF7 Skins node type.

editOnChange ( event event, string optionsArrayType = null, integer index = null, obj rowInfo = null )
Update specific node during live editing. This function can be used to store an array of select, checkbox and radio options. For single value, simply pass the element event.

editOnKeyPress ( obj event )
Validate input value after hitting Enter key.

editAddOption ( obj event )
Add an option value for checkbox, radio or select.

editRemoveOption ( obj event, integer index )
Remove an option value for checkbox, radio or select.

editVisibility ( bool bool )
Show or hide the Edit dialog.

validateInput ( obj event )
Validate a node event before updating to treeData. It follows CF7 tag generator validations.

validateVisualData ( obj event )
Currently this only checks if node has registered CF7 Skins node type.

setNotice ( string content, string status = ‘success’ , bool isDismissible = true )
Add notice message.

removeNotice ()
Remove notice message.

clickMenu ( obj rowInfo, obj menu )
Add or update node object properties after clicking a menu item.

clickVisualObject ()
Open edit window and display current Visual data.

clickFormOptions ()
Open edit window and display current form option.

closeEdit ()
Close edit window and empty current rowInfo.

Selectors #

getStates ( obj state )
Get wp-data state from store.

getTreeData ( obj state )
Get treeData.

getRowInfo ( obj state )
Get rowInfo.

Code Review #

Files added for @wordpress/data

  • src
    • visual
      • data
        • [X] index.js
        • [X] actions.js – needs work from Sastra
        • [X] reducer.js – needs work from Sastra
        • [X] selectors.js
        • [X] README.md
      • util
        • [X] data.js – seems to be outdated & redundant

Files changed for @wordpress/data

  • [X] package.json
  • [X] buildPlugin.js
  • [X] webpack.config.js – externalized ‘@wordpress/data’ module
  • config
    • config/webpack.config.dev.js – provided @wordpress/data to window
    • webpack.config.prod.js
    • webpack.config.scripts.js
  • vendor
  • src
    • visual
      • [X] index.js
      • Form
        • [X] index.js
        • Edit
          • [X] index.js – needs work from Sastra
        • Items
          • [X] index.js
          • InputItem
            • [X] index.js
          • InputItemMenu
            • [X] index.js
        • Notice
          • [X] index.js
        • Select
          • [X] index.js
          • SelectItem
            • [X] index.js
          • Tip
            • [X] index.js
        • AddOns
          • Multi
          • [X] index.js – commenting needs work
          • [X] cf7sMultiItem.js
          • [X] edit.js
          • [X] options.js
          • [X] tabs.js
          • Pro
          • [X] index.js
          • Ready
            • [X] index.js
            • [X] rules.js

Plugin Files changed for @wordpress/data

  • cf7skins
    • includes
      • [X] admin.php
      • [X] admin-visual.php – Sastra to check
  • contact-form-7-skins
    • includes
      • [X] admin.php
      • [X] admin-visual.php – Sastra to check
  • cf7skins-pro
    • includes
      • [X] admin-visual-pro.php
  • cf7-skins-pro
    • includes
      • [X] admin-visual-pro.php

Further Reading #

Notes

Add notes here

Save all Images to Dropbox – use ..\Dropbox\Development\Development Guidelines\CF7 Skins Code\CF7 Skins Visual Code\@wordpress-data\