{"id":134400,"date":"2021-03-09T08:38:19","date_gmt":"2021-03-09T08:38:19","guid":{"rendered":"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/designers\/user-interface\/"},"modified":"2025-01-07T18:34:16","modified_gmt":"2025-01-07T18:34:16","slug":"user-interface","status":"publish","type":"blocks-handbook","link":"https:\/\/developer.wordpress.org\/block-editor\/explanations\/user-interface\/","title":{"rendered":"User Interface"},"content":{"rendered":"

The Block Editor<\/h2>\n

The block editor\u2019s general layout uses a bar at the top, with content below.<\/p>\n

\"Editor<\/p>\n

The Toolbar<\/strong> contains document-level actions: Editor\/Select modes, save status, global actions for undo\/redo\/insert, the settings toggle, and publish options.<\/p>\n

The Content Area<\/strong> contains the document itself.<\/p>\n

The Settings Sidebar<\/strong> contains additional settings for the document (tags, categories, schedule etc.) and for blocks in the \u201cBlock\u201d tab. A cog button in the toolbar hides the Settings Sidebar, allowing the user to enjoy a more immersive writing experience. On small screens, the sidebar is hidden by default.<\/p>\n

The Block<\/h2>\n

The block itself is the most basic unit of the editor. Generally speaking, everything is a block. Users build posts and pages using blocks, mimicking the vertical flow of the underlying HTML markup.<\/p>\n

By surfacing each section of the document as a manipulatable block, we surface block-specific features contextually. This is inspired by desktop app conventions, and allows for a breadth of advanced features without weighing down the UI.<\/p>\n

A selected block shows a number of contextual actions:<\/p>\n

\"Block<\/p>\n

The block interface has basic actions. The block editor aims for good, common defaults, so users should be able to create a complete document without actually needing the advanced actions in the Settings Sidebar.<\/p>\n

The Block Toolbar<\/strong> highlights commonly-used actions. The Block Icon<\/strong> lives in the block toolbar, and contains high-level controls for the selected block. It primarily allows users to transform a block into another type of compatible block. Some blocks also use the block icon for users to choose from a set of alternate block styles.<\/p>\n

The Block Formatting<\/strong> options let users adjust block-level settings, and the Inline Formatting<\/strong> options allow adjustments to elements inside the block. When a block is long, the block toolbar pins itself to the top of the screen as the user scrolls down the page.<\/p>\n

Blocks can be moved up and down via the Block Mover<\/strong> icons. Additional block actions are available via an ellipsis menu: deleting and duplicating blocks, as well as advanced actions<\/strong> like \u201cEdit as HTML\u201d and \u201cConvert to Reusable Block.\u201d<\/p>\n

An unselected block does not show the block toolbar or any other contextual controls. In effect, an unselected block is a preview of the content itself:<\/p>\n

\"Unselected<\/p>\n

Please note that selection and focus can be different. An image block can be selected while the focus is on the caption field.<\/p>\n

Settings Sidebar<\/h2>\n

\"Settings<\/p>\n

The sidebar has two tabs, Document and Block:<\/p>\n

    \n
  • The Document Tab<\/strong> shows metadata and settings for the post or page being edited.<\/li>\n
  • The Block Tab<\/strong> shows metadata and settings for the currently selected block.<\/li>\n<\/ul>\n

    Each tab has sets of editable fields (Sidebar Sections<\/strong>) that users can toggle open or closed.<\/p>\n

    If a block requires advanced configuration, those settings should live in the Settings Sidebar. Don\u2019t put anything in the sidebar block tab that is necessary for the basic operation of your block; your user might dismiss the sidebar for an immersive writing experience. Pick good defaults, and make important actions available in the block toolbar.<\/p>\n

    Actions that could go in the block tab of the sidebar could be:<\/p>\n

      \n
    • Drop cap, for text<\/li>\n
    • Number of columns for galleries<\/li>\n
    • Number of posts, or category, in the \u201cLatest Posts\u201d block<\/li>\n
    • Any configuration that you don\u2019t need access to in order to perform basic tasks<\/li>\n<\/ul>\n

      Block Library<\/h2>\n

      \"Block<\/p>\n

      The Block Library<\/strong> appears when someone inserts a block, whether via the toolbar, or contextually within the content area. Inside, blocks are organized into expandable sections. The block library\u2019s search bar auto-filters the list of blocks as the user types. Users can choose a block by selecting the Block Button<\/strong> or the Block Name<\/strong>.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":134616,"menu_order":363,"template":"","meta":{"footnotes":""},"class_list":["post-134400","blocks-handbook","type-blocks-handbook","status-publish","hentry","type-handbook"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook"}],"about":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/types\/blocks-handbook"}],"version-history":[{"count":4,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134400\/revisions"}],"predecessor-version":[{"id":151903,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134400\/revisions\/151903"}],"up":[{"embeddable":true,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134616"}],"wp:attachment":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/media?parent=134400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}