{"id":2666,"date":"2026-06-10T18:51:14","date_gmt":"2026-06-10T18:51:14","guid":{"rendered":"https:\/\/localwp.com\/?p=2666&#038;post_type=help&#038;preview_id=2666"},"modified":"2026-06-16T00:01:11","modified_gmt":"2026-06-16T00:01:11","slug":"the-local-interface","status":"publish","type":"help","link":"https:\/\/localwp.com\/help-docs\/designing-your-add-on\/the-local-interface\/","title":{"rendered":"The Local Interface"},"content":{"rendered":"\n<div class=\"wp-block-group help-doc-toc\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Table of Contents:<\/p>\n\n\n<nav aria-label=\"Table of Contents\" class=\"wp-block-table-of-contents\"><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#a-brief-overview-of-local-s-design\">A brief overview of Local&#039;s design<\/a><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#core-ui\">Core UI<\/a><\/li><\/ol><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#broader-context-to-the-left-narrower-context-to-the-right\">Broader context to the left, narrower context to the right<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#complex-layouts\">Complex layouts<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#overlays\">Overlays<\/a><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#full-width-overlay\">Full-width Overlay<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#drawer-overlay\">Drawer Overlay<\/a><\/li><\/ol><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#modals\">Modals<\/a><\/li><\/ol><\/nav><\/div><\/div>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"a-brief-overview-of-local-s-design\" class=\"wp-block-heading has-text-color has-link-color wp-elements-6b18795716de89584f68e5b4d07c944f\" style=\"color:#000000\"><strong>A brief overview of Local&#8217;s design<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before designing your add-on, it&#8217;s important to understand how Local is designed, and the context within which your add-on will be used.<\/p>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"core-ui\" class=\"wp-block-heading has-text-color has-link-color wp-elements-05edab77d24fa262446fa8aa613c17c9\" style=\"color:#000000\"><strong>Core UI<\/strong><\/h3>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1536\" height=\"863\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/image.avif\" alt=\"\" class=\"wp-image-2668\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/image.avif 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/image-300x169.avif 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/image-1024x575.avif 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/image-768x432.avif 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Local, at it&#8217;s core, is crafted from a simple idea\u2026that you should easily be able to create and manage your WordPress sites locally. The main navigation separates each core section of the app into tabs at this highest-level. Context deepens inside of these tabs, their specific layouts dependent on their content. This concept is illustrated below.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1536\" height=\"542\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/standard-tabs.avif\" alt=\"\" class=\"wp-image-2669\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/standard-tabs.avif 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/standard-tabs-300x106.avif 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/standard-tabs-1024x361.avif 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/standard-tabs-768x271.avif 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"broader-context-to-the-left-narrower-context-to-the-right\" class=\"wp-block-heading has-text-color has-link-color wp-elements-f887d2efbf1381354be3671e0478b4ce\" style=\"color:#000000\"><strong>Broader context to the left, narrower context to the right<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This rule of &#8220;broader context to the left, narrower context to the right,&#8221; is extended into the main area, which can include multiple levels of navigation and various layouts based on content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One example is the &#8220;Local Sites&#8221; tab, which includes a &#8220;sidebar navigation&#8221; to select a site, and then a &#8220;main&#8221; section where content is variable. In the screen below, there is a &#8220;hero&#8221; area with &#8220;subnavigation,&#8221; a two-column layout inside of the subsection selected in the subnavigation, and a &#8220;footer.&#8221;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1536\" height=\"542\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/sites-tab-with-notes.avif\" alt=\"\" class=\"wp-image-2670\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/sites-tab-with-notes.avif 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/sites-tab-with-notes-300x106.avif 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/sites-tab-with-notes-1024x361.avif 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/sites-tab-with-notes-768x271.avif 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"complex-layouts\" class=\"wp-block-heading has-text-color has-link-color wp-elements-59788c610c2940f1f5d670a38c97783b\" style=\"color:#000000\"><strong>Complex layouts<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Layouts can easily be more complex to support other types of content. For example, an even deeper-level of sidebar navigation (noted as &#8220;tertiary nav&#8221;) is present within this section of the app.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1536\" height=\"542\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/complex-layouts-1.avif\" alt=\"\" class=\"wp-image-2671\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/complex-layouts-1.avif 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/complex-layouts-1-300x106.avif 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/complex-layouts-1-1024x361.avif 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/complex-layouts-1-768x271.avif 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This pattern is continued sightly differently in the &#8220;Connect&#8221; tab of Local, where the same &#8220;hero&#8221; and &#8220;subnavigation&#8221; are present, but there is no &#8220;sidebar navigation.&#8221;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1536\" height=\"542\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/complex-layouts-2.avif\" alt=\"\" class=\"wp-image-2672\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/complex-layouts-2.avif 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/complex-layouts-2-300x106.avif 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/complex-layouts-2-1024x361.avif 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/complex-layouts-2-768x271.avif 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div id=\"help-step-block_2ca86a02f0bb93e56e7dd84ef115b63f\" class=\"help-note-container help-type-note\">\n\t<div class=\"help-icon\">\n\t\t<svg viewBox=\"0 0 512 512\" fill=\"currentColor\"><path fill=\"currentColor\" d=\"M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-464a208 208 0 1 0 0 416 208 208 0 1 0 0-416zm70.7 121.9c7.8-10.7 22.8-13.1 33.5-5.3 10.7 7.8 13.1 22.8 5.3 33.5L243.4 366.1c-4.1 5.7-10.5 9.3-17.5 9.8-7 .5-13.9-2-18.8-6.9l-55.9-55.9c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l36 36 105.6-145.2z\"><\/path><\/svg>\t<\/div>\n    <div class=\"help-text\">\n\t\t<p>Key to creating a successful add-on is always thinking about task hierarchy. Are your actions and tasks visually located in the correct place? Is the information clearly communicating its level of importance?<\/p>\n\t<\/div>\n<\/div>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"overlays\" class=\"wp-block-heading has-text-color has-link-color wp-elements-d4fe9f789ac7e4be12c013075895a5db\" style=\"color:#000000\"><strong>Overlays<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Within Local, there is occasionally the need to create a higher-level of context within a specific state. If the main Local interface is the layer of context tied to actions around Local sites, Overlays help achieve a literal layer of separation between these strictly app-level actions, and those actions that interact with external concepts or files.<\/p>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"full-width-overlay\" class=\"wp-block-heading has-text-color has-link-color wp-elements-cd3e1dfc06e6820992224b0638f78b50\" style=\"color:#000000\"><strong>Full-width Overlay<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We often use a full-screen overlay to enter settings for a new item being created within Local. For example, you can see this when selecting &#8220;Create New Site.&#8221; Since this site does not currently exist, this additional level of separation from the application highlights that something new is being created, and focuses the user on that task.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1536\" height=\"542\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/full-width-overlay.avif\" alt=\"\" class=\"wp-image-2673\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/full-width-overlay.avif 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/full-width-overlay-300x106.avif 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/full-width-overlay-1024x361.avif 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/full-width-overlay-768x271.avif 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Once the site is created, it shows up in the Local sidebar, and most further actions are tied into the main Local interface.<\/p>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"drawer-overlay\" class=\"wp-block-heading has-text-color has-link-color wp-elements-4e4d7da3cf4ea0d283e8c19a95751aec\" style=\"color:#000000\"><strong>Drawer Overlay<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Somewhat similarly to the full-screen overlay, when an action integrates with an outside service, but is triggered from a site-specific action, the drawer overlay is used. For example, this view is used when pushing or pulling a site to Flywheel. This is because, while you are interacting with your Local site, you&#8217;re setting preferences and importing from (or exporting to) an outside service.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1536\" height=\"542\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/drawer-overlay.avif\" alt=\"\" class=\"wp-image-2674\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/drawer-overlay.avif 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/drawer-overlay-300x106.avif 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/drawer-overlay-1024x361.avif 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/drawer-overlay-768x271.avif 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Note that each overlay provides a clear way to exit without completing the task within. This is key, as an overlay removes ability to interact with the interface below.<\/p>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"modals\" class=\"wp-block-heading has-text-color has-link-color wp-elements-122c551dc55ca52a170a631e2e6e3c5c\" style=\"color:#000000\"><strong>Modals<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Traditional modality should be largely avoided, except in the few cases when it is appropriate to remove distractions and focus the user on making a decision.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When an additional interaction is required to complete a task, such as selecting where to push or pull a site, or confirming or denying an action, an overlay modal is triggered. These modals are kept as simple as possible, ideally limited to a singular concept required to complete the initial task. Always provide clear ways to both exit the modal, and complete the ask given within them.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/modals.avif\" alt=\"\" class=\"wp-image-2675\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/modals.avif 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/modals-300x200.avif 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/modals-1024x683.avif 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/modals-768x512.avif 768w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/modals-600x400.avif 600w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<div style=\"height:22px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div id=\"help-step-block_2dd1b5cc35c8e7d125858df51201dcdc\" class=\"help-note-container help-type-danger\">\n\t<div class=\"help-icon\">\n\t\t<svg viewBox=\"0 0 512 512\" fill=\"currentColor\"><path fill=\"currentColor\" d=\"M256.5 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.6 480 472.5 480l-432 0c-14.1 0-27.1-7.4-34.3-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zM53.9 432L459.1 432 256.5 56.8 53.9 432zm202.6-40a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm0-208c18.6 0 33 16.1 31 34.6l-7.1 64.1C279 294.8 268.7 304 256.5 304s-22.5-9.2-23.8-21.3l-7.1-64.1c-2-18.5 12.4-34.6 31-34.6z\"><\/path><\/svg>\t<\/div>\n    <div class=\"help-text\">\n\t\t<p>Modals should not be used for actions more complex than answering a simple &#8220;yes,&#8221; &#8220;no,&#8221; or simple selection.<\/p>\n\t<\/div>\n<\/div>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Table of Contents: A brief overview of Local&#8217;s design Before designing your add-on, it&#8217;s important to understand how Local is designed, and the context within which your add-on will be used. Core UI Local, at it&#8217;s core, is crafted from a simple idea\u2026that you should easily be able to create and manage your WordPress sites&#8230;<\/p>\n","protected":false},"author":78,"parent":2658,"menu_order":14,"template":"","tags":[],"helpcategories":[68],"class_list":["post-2666","help","type-help","status-publish","hentry","helpcategories-designing-your-add-on"],"acf":{"help_keywords":""},"_links":{"self":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc"}],"about":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/types\/help"}],"author":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/users\/78"}],"version-history":[{"count":0,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2666\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2658"}],"wp:attachment":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/media?parent=2666"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/tags?post=2666"},{"taxonomy":"helpcategories","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/helpcategories?post=2666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}