Our vision is to be the go-to resource for design for other teams across the WordPress open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.
WordPress Components are the set of interface elements that make up the BlockBlockBlock 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 (UIUIUI 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 GutenbergGutenbergThe 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.
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 SlackSlackSlack 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.
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.
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 pingPingThe 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.
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