WordPress components

What are they?

WordPress Components are the set of interface elements that make up the BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Editor and other projects. This includes several user interface (UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.) components like buttons, menus, and text fields. You can find them in the Gutenberg GitHub repo or in the Block Editor Handbook. The code for these components exists in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ repo, and is available through the `@wordpress/components` npm package.

  • Visual components: These are the reusable bits of UI that can be used in Figma, for creating mockups. The Figma components should mirror exactly what is available in code.
  • Code components: These are considered the source of truth. These are the javascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. code components that exist in the Gutenberg GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repo.

Top ↑


Top ↑

Adding a new component in Figma

Note: this process goes hand in hand with the process of adding a code component to @wordpress/components. That process can be found in the GitHub Gutenberg repo. In order for a new component to be added to Figma, it must first exist in code (the source of truth).

Once there is a proposal for a code component on GitHub, the process of adding a Figma component can start. Adding the “Figma Library Update” GitHub label will notify the #design SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel that a change/addition is needed.

First, open the WordPress Design Figma library.

  • Proposals: Make a component and add it to the Proposals page to be discussed. During this phase, feel free to work on the component until the component is finalized in the Gutenberg GitHub repo. Because the Figma components mirror what’s in code, we shouldn’t publish a new Figma component until it’s available in code.
  • Iteration: Iterate on the component until it matches the coded component. This includes color, spacing, typography, states, etc. Make sure you follow the general component guidelines and naming conventions.
  • Review: Once the coded component has been finalized, it’s time to review the Figma component and get it ready for publishing. Figma maintainers will need to check for accuracy, layer structure, and naming. Please pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” the designers in the #design Slack channel to get a review.
  • Publish: After the code component has been released to @wordpress/components, the Figma component can now be published to the Figma library by a maintainer. Be sure to include release notes. Maintainers: Please follow the publishing guidelines.

Top ↑

Editing an existing component in Figma

If you find a bug, or you’d like to enhance an existing component, please notify those working on Figma in the #design Slack channel. The process is mostly the same as adding a new component, except GitHub and the code components are not involved.  Please follow the process for adding a new Figma component as described above

Top ↑

GitHub workflow when a code component changes

If you make a change to any code component as a designer or developer, the corresponding Figma component will need to be updated.

  • Add the GitHub label “Figma Library Update”.
  • Follow the process for editing an existing component as described above.

Top ↑

Last updated: