WordPress Components

Last Updated on September 22, 2023 by Vinoth SN

Neil:

For me the key points are:

  • does using an icon make it easier for users to understand the interface
  • icons are common in WordPress & widely used in our existing UI
  • use WordPress Components wherever practical
  • our UI should be consistent to make it easier for users to find what they re looking (not currently consistent)

Sastra:

WordPress provides default UI CSS styles that can be found in the admin page. It is loaded using /wp-admin/load-styles.php, and can be found by viewing HTML source.

Block editor (a.k.a Gutenberg) provides re-useable components

The button component itself provides a prop to include an icon for the button.

Sastra:

We widely use WordPress components in our project. It has detailed documentation we can read and try to apply together with update every time the component has changed.

We use it if possible, it gives better consistency and users familiar with default WordPress UI, for example the button, popup dialog, dropdown menu, etc. It also save us a lot of time by not doing CSS for the component we’ve added.

If WP components does not match to our requirements, we can create our own components, still by following default WordPress behaviour of styling i.e. margin, padding, color scheme, and HTML className and hierarchy structure.

Vinoth:

This reference suitable for general HTML/CSS work. but now we are building the design in figma and components are updated so we need to refer this kind of configuration