Skip to content

Latest commit

 

History

History
82 lines (60 loc) · 2.33 KB

README.md

File metadata and controls

82 lines (60 loc) · 2.33 KB
Raw

Settings Tester

A companion plugin to test Reactification of WooCommerce Settings. This plugin includes all known possible integration methods for adding UI|UX elements to WooCommerce settings. The integration methods are intentionally stripped down for testing purposes.

A summary of the known issues is used to keep track of problems with existing integration techniques.

See Settings implementation in Core WooCommerce.

Integration Methods

Below are checklists for each way an extension can add functionality to WooCommerce settings. If the checkbox is checked, that means the integration method has been implemented to a satisfactory degree.

Components

  • title
  • info
  • sectionend
  • text
  • password
  • datetime
  • datetime-local
  • date
  • month
  • time
  • week
  • number
  • email
  • url
  • tel
  • color
  • textarea
  • select
  • multiselect
  • radio
  • checkbox
  • image_width
  • single_select_page
  • single_select_page_with_search
  • single_select_country
  • multi_select_countries
  • relative_date_selector

Custom Views

  • Use of woocommerce_admin_field_ hook to output arbitrary HTML.
  • Extending WC_Settings_Page with custom output method to render arbitrary HTML.

Javascript

  • Plain Javascript to interact with the DOM.
  • jQuery to interact with the DOM.
  • Use of document.addEventListener( 'DOMContentLoaded', () => { ... } ) to bind JS to the DOM.
  • Use of jQuery.ready() to bind JS to the DOM.
  • Echoing HTML with <script> tags to output JS that interacts with the DOM.

SlotFill

  • Use of SlotFill for rendering React components making use of Gutenberg context.

Save hooks

More research is required to determine how hooks are being used when settings are saved.

Modern Screens

  • Add a modern React screen via configuration and client side filtering.

Getting Started

Prerequisites

Installation and Build

npm install
npm run build
wp-env start