{"id":119,"date":"2024-10-03T12:49:36","date_gmt":"2024-10-03T16:49:36","guid":{"rendered":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/?page_id=119"},"modified":"2025-01-24T10:52:30","modified_gmt":"2025-01-24T15:52:30","slug":"core-components","status":"publish","type":"page","link":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/handbook\/wp-core\/components-reference\/core-components\/","title":{"rendered":"Core Components"},"content":{"rendered":"\n<p>Core Components ship with WordPress. This package includes a library of generic WordPress components to be used for creating common UI elements shared between screens and features of the WordPress dashboard. Some examples include <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/button\/\">Button<\/a>, <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/color-picker\/\">ColorPicker<\/a>, and <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/text-control\/\">TextControl<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"835\" height=\"1024\" src=\"\/gutenberg\/files\/2025\/01\/button-835x1024.png\" alt=\"\" class=\"wp-image-460\" srcset=\"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2025\/01\/button-835x1024.png 835w, https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2025\/01\/button-519x636.png 519w, https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2025\/01\/button-768x942.png 768w, https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2025\/01\/button.png 1044w\" sizes=\"(max-width: 835px) 100vw, 835px\" \/><figcaption>Example showing Button component precompiled code, rendered code, and browser display.<\/figcaption><\/figure>\n\n\n\n<h2>Code and Documentation<\/h2>\n\n\n\n<ul><li>You can find the actual code in the&nbsp;<a href=\"https:\/\/github.com\/WordPress\/gutenberg\">Gutenberg GitHub repo<\/a><\/li><li>Documentation is available in the&nbsp;<a href=\"https:\/\/developer.wordpress.org\/block-editor\/components\/\">Block Editor Handbook<\/a><\/li><li>A great reference is the <a href=\"https:\/\/storybook.js.org\/showcase\/wordpress-gutenberg\">Gutenberg Storybook<\/a><\/li><li><a href=\"https:\/\/wp-gb.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/wp-gb.com\/<\/a> maintains a searchable list of components with screenshots and code samples.<\/li><\/ul>\n\n\n\n<h2>What components are available in each WordPress version?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"947\" height=\"1024\" src=\"\/gutenberg\/files\/2025\/01\/browse-github-components-by-wordpress-version-947x1024.png\" alt=\"\" class=\"wp-image-479\" srcset=\"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2025\/01\/browse-github-components-by-wordpress-version-947x1024.png 947w, https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2025\/01\/browse-github-components-by-wordpress-version-588x636.png 588w, https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2025\/01\/browse-github-components-by-wordpress-version-768x830.png 768w, https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2025\/01\/browse-github-components-by-wordpress-version.png 1047w\" sizes=\"(max-width: 947px) 100vw, 947px\" \/><figcaption>Switch to the branch for the version of WordPress in our environment by looking for the branch name that starts with <code>wp\/&lt;version&gt;<\/code><\/figcaption><\/figure>\n\n\n\n<p>Components in each WordPress release can be browsed in Github by changing to the branch for each release. This will let you see the components, their code, and the documentation for each. The Block Editor Handbook in contrast is always updated and reflects the latest version of WP so it includes components we may not have access to yet and properties, features, etc that might be only in the latest release. <\/p>\n\n\n\n<h2>WordPress 5.8 Components:<\/h2>\n\n\n\n<h3>Components Package<\/h3>\n\n\n\n<p>The components package located in <code>gutenberg\/packages\/components<\/code> contains the majority of the components you&#8217;ll want to explore and use in your blocks. <\/p>\n\n\n\n<p>For 5.8 you can find it here: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/wp\/5.8\/packages\/components\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/WordPress\/gutenberg\/tree\/wp\/5.8\/packages\/components<\/a><\/p>\n\n\n\n<h3>Block Editor Package<\/h3>\n\n\n\n<p>The Block Editor package located in <code>gutenberg\/packages\/block-editor<\/code> contains some components that you may also want to use. These components are typically related to the overall block editor UI. Components like <code>link-control<\/code>, <code>InspectorControls<\/code>, <code>InnerBlocks<\/code>, and <code>rich-text<\/code> live in this package. <\/p>\n\n\n\n<p>For 5.8 you can find it here: <br><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/wp\/5.8\/packages\/block-editor\/src\/components\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/WordPress\/gutenberg\/tree\/wp\/5.8\/packages\/block-editor\/src\/components<\/a><\/p>\n\n\n\n<ul><li><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/wp\/5.8\/packages\/block-editor\/src\/components\/inner-blocks\" target=\"_blank\">Inner Blocks<\/a> &#8211; allows blocks to have nested child blocks<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/wp\/5.8\/packages\/block-editor\/src\/components\/inspector-controls\" target=\"_blank\">Inspector Controls<\/a> &#8211; allows you to add components to the sidebar for the selected block<\/li><li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/wp\/5.8\/packages\/block-editor\/src\/components\/rich-text\" target=\"_blank\" rel=\"noreferrer noopener\">Rich-text<\/a> &#8211; A very commonly used component for allowing users to enter and format content. Used in blocks like Paragraph blocks.<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>More at <a href=\"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/getting-started\/building-a-block\/importing-components\/\">Getting Started: Importing Components<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Core Components ship with WordPress. This package includes a library of generic WordPress components to be used for creating common UI elements shared between screens and features of the WordPress dashboard. Some examples include Button, ColorPicker, and TextControl. Code and Documentation You can find the actual code in the&nbsp;Gutenberg GitHub repoDocumentation is available in the&nbsp;Block [&hellip;]<\/p>\n","protected":false},"author":3670,"featured_media":0,"parent":117,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"status-is-a-reserved-term":[],"assignee":[],"_links":{"self":[{"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/119"}],"collection":[{"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/users\/3670"}],"replies":[{"embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/comments?post=119"}],"version-history":[{"count":9,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/119\/revisions"}],"predecessor-version":[{"id":481,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/119\/revisions\/481"}],"up":[{"embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/117"}],"wp:attachment":[{"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/media?parent=119"}],"wp:term":[{"taxonomy":"status-is-a-reserved-term","embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/status-is-a-reserved-term?post=119"},{"taxonomy":"assignee","embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/assignee?post=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}