• Sanitization in JS
• The Customizer JS API
• React introduction

We can use wp-sanitize.js functions to sanitize the strings to be used to append to HTML elements.

We can use stripTags function to remove tags from the string, and safely update the text of element.

Example use case of this can be in our customizer.js where we are using postMessage transport for live preview. Instead of directly adding the user input to innerHTML, we can sanitize it first.

Here is the output of stripTags

For each object of customizer in php, there is corresponding object in js, and we can use it to change the customizer.

Here are some things I tried from console

• Move a control to another section
• activate/deactivate a section
• Change order of sections (by changing priority)
• To focus on a specific section or control

wp.customize.control('blogname').section('colors'))

This will move the blogname control into colors section.

wp.customize.section('colors').deactivate()

This will hide the colors section.

wp.customize.section('colors').deactivate({duration : 1000})

we can even set the time for the animation is shows when hiding the section.

For reordering the sections, we can change their priority.

wp.customize.panel('widgets').priority(10);

This will bring the widgets panel at the top!

When we use selective refresh, we get a pencil icon on that specific control and when we click it, the control is opened directly in the customizer.

This is achieved using the focus method, we can try it by focusing a section or panel

wp.customize.control('blogname').focus()

React

React is js library using which we can create user interfaces.

Components are building blocks in react, that we can use to define a UI element, like an table component. Components can be exchanged data using props.

Concepts in React :-

Virtual DOM is virtual representation of the actual DOM, it exists in the memory and used to update the actual DOM

When we render our react component for the first time, Virtual DOM tree is generated, it is similar to the JSX structure we write for our component.

When we make changes to the component state or props, re-render is triggered but react does not update the actual DOM, instead it created new virtual DOM and compared it with the old one.

Then only the changes which are required are updated in the actual DOM

JSX is Javascript XML, it is extension of js that is used with react.

Using JSX we can write HTML like code for our component

I am using vscode for coding, I have installed prettier, eslint extensions.

For starting with react, we can use create-react-app that sets up the environment for us and we can get to building the components.

npx create-react-app todo

I created this very simple functional component

function App() {
  return (
   <h1>Hello From Pratik!</h1>
  );
}

export default App;

References I refered Today:-

• https://create-react-app.dev/
• https://react.dev/learn/writing-markup-with-jsx
• https://developer.wordpress.org/themes/customize-api/the-customizer-javascript-api/
• https://wpseek.com/source/wp/latest/nav.html?wp-includes/js/wp-sanitize.js.source.html