{"id":5941,"date":"2025-05-20T16:35:33","date_gmt":"2025-05-20T16:35:33","guid":{"rendered":"https:\/\/nmi.cool\/webdev\/?page_id=5941"},"modified":"2025-05-20T16:35:33","modified_gmt":"2025-05-20T16:35:33","slug":"a-tale-of-two-editors","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/a-tale-of-two-editors\/","title":{"rendered":"A Tale of Two Editors"},"content":{"rendered":"\n

As we\u2019ve learned so far, websites are made up of content that is styled to display in a pleasing and functional way \u2013 in short, content and style. WordPress separates where users create the bulk of their content, on Posts and Pages, and the style or design of the website, collected under Appearance. For years, users customized the appearance of their WordPress websites using what is now known as the Classic Editor. Users could access Themes, Menus, Customization, Widgets, Additional CSS, and more under the Appearance menu. In 2021, WordPress began migrating to a new editor<\/a>, now called Site Editor, or Full Site Editor. <\/p>\n\n\n\n

The new Site Editor<\/a> significantly changed how users can build and customize the appearance of their websites. Let\u2019s take a look at some of the key differences:<\/p>\n\n\n\n

Block Editor<\/strong><\/h3>\n\n\n\n

The Block Editor, previously known as the Gutenburg Editor, is a powerful tool that enables a user to build out content on a Page or Post using drag-and-drop blocks. Access the Block Inserter in the top menu. It\u2019s a blue box with a plus sign.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You\u2019ll see a bunch of blocks that contain a whole range of common content elements \u2013 paragraphs, images, columns, tables, and galleries. You can also quickly insert styled cover photos, pull quotes, drop caps, query loops, videos, audio, and more. <\/p>\n\n\n\n

\n

WordPress allows you to customize some of a Block’s appearance in the Settings sidebar. You can dig even deeper into block customization in the Style Editor, which you\u2019ll read about below.<\/p>\n<\/div>\n\n\n\n

\"\"
You can also toggle between Page Settings!<\/figcaption><\/figure>\n\n\n\n

A Note about Widgets: <\/strong>In WordPress\u2019s Classic Editor, Widgets are added and customized using the Appearance menu. They are, in effect, Widgets separate from your main Page or Post content. The Block Editor has incorporated Widgets as a category, and FSE themes don\u2019t include them under the Appearance menu. You customize them in the Block Editor settings or in the Style Editor.<\/p>\n\n\n\n

Style Editor<\/strong><\/h3>\n\n\n\n

Access the Style Editor by navigating to Appearance > Editor in your Dashboard. Editor presents five Design categories.<\/p>\n\n\n\n

\"\"
These categories determine the design of your website.<\/figcaption><\/figure>\n\n\n\n

Click into Styles. Depending on your Theme, you\u2019ll be presented with several default styles that you can apply to your website. These styles will have unique fonts, colors, layout settings, and other features that complement each other. If one of these styles appeals to you, apply it and start building content. Easy peasy. <\/p>\n\n\n\n

\"\"
You can tweak these style combinations.<\/figcaption><\/figure>\n\n\n\n

If you have a visual brand that you need to apply to your website because you\u2019re building it for a client, for example, then you\u2019ll need to customize these styles a little more. To do that, click on the \u201cEdit styles\u201d icon to dig into further customization options.<\/p>\n\n\n\n

In the Styles panel, which you can access on any page or post by clicking on the half moon icon, you\u2019ll see a list of five style categories to select and edit: Typography, Colors, Background, Shadows, and Layout. Click into each of these categories to easily customize styles for your whole site.<\/p>\n\n\n\n

\"\"
Click into the five Style categories to customize them. Preview the changes in the content window.<\/figcaption><\/figure>\n\n\n\n

Style Book<\/strong><\/h4>\n\n\n\n

If you\u2019re wondering what that eye icon is all about, that takes you to the Style Book for your selected style. The Style Book displays the full application of the Style, from background colors and font settings for your paragraph text and headers, to button styling.<\/p>\n\n\n\n

\"\"
Quickly get a sense of how the Style is applied across your site.<\/figcaption><\/figure>\n\n\n\n

Customizing Blocks<\/strong><\/h4>\n\n\n\n

If you look below the five Styles categories we discussed above, you\u2019ll see an option to customize the appearance of specific blocks for the whole site. Click into Blocks, and you\u2019ll see the full list of Blocks available in the Block Editor. Let\u2019s select Heading. <\/p>\n\n\n\n

\"\"
There’s even more than this. <\/figcaption><\/figure>\n\n\n\n

The first thing you\u2019ll see is a window with a sample heading. This window allows you to preview changes you make to the Heading appearance. Below the preview window is a set of features you can customize \u2013 font styles and sizes, padding, orientation, and more. Customizing the Heading here will change its appearance everywhere you have a Heading block on your website.<\/p>\n\n\n\n

Editing Navigation<\/strong><\/h3>\n\n\n\n

How to edit the content and style of the site\u2019s navigation is the biggest functional change (in my opinion) between the Classic Editor and the Full Site Editor. This is the biggest thing to remember: The Navigation section is where you can create new Navigation Menus and remove links from Navigation Menus. In order to add <\/em>new links to your Navigation Menu, you\u2019ll need to click into the page you\u2019re previewing in the Editor. Here you can access the Navigation Block and add new links. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

But wait, how do I know I\u2019m editing the Navigation Block?<\/em><\/p>\n\n\n\n

Remember that any website is a list of code with containers of code nested within other containers. WordPress organizes containers of codes as Blocks. In the top menu, click on the List View icon. This opens a list of all the blocks on your page so that you can select the block that you want to edit. The Navigation block icon is a compass. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Read more from WordPress about how to customize the appearance of your Navigation Menu<\/a>.<\/p>\n\n\n\n

Editing Templates<\/strong><\/h3>\n\n\n\n

The Site Editor makes more use than ever of templates. Each theme will have a defined catalogue of templates for common page layouts. Every page that you create or that is automatically created by your theme will have a template applied to it.<\/strong> These templates are made up of Blocks and Patterns, and the Templates section of the Editor curates your theme\u2019s templates.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A template encases a Page or Post\u2019s content area and adds consistent layout and design features across each page. Use the Editor to find the template you want to edit, click on it, then isolate the blocks you want to edit.<\/p>\n\n\n\n

Editing Patterns<\/strong><\/h3>\n\n\n\n

Similar to Templates, the Patterns section of the Editor curates all Patterns used in the Theme. Templates make use of patterns to style Headers and Footers. Customize the appearance of Header and Footer patterns in this section. Alternatively, access a Header or Footer pattern by clicking on the Header\/Footer pattern while editing a Template. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You can also find and customize Patterns that you added to Page, Post, or Template. You can even create a whole new pattern. <\/p>\n\n\n\n

Learn more about patterns<\/a> from the folks at WP Beginner. This is a nice introduction into using and creating patterns the right way.<\/p>\n\n\n\n

Phew! That\u2019s a Lot.<\/h2>\n\n\n\n

In summary, the new Full Site Editor has a lot going on. Here are a few key things to take away:<\/p>\n\n\n\n

    \n
  1. When you select a Theme, it\u2019s important to find themes that use the new Site Editor. Why? Because that\u2019s the direction that WordPress is moving, and therefore, that\u2019s where the field is moving. It\u2019s also the Editor we\u2019ll be practicing in this class.<\/li>\n\n\n\n
  2. Most help forums, articles, or videos from 2021\/2022 or older will be referencing the Classic Editor, so just be aware of that.<\/li>\n\n\n\n
  3. Customization is a little trickier using Additional CSS than it was in the Classic Editor.<\/li>\n\n\n\n
  4. Get to know about the Full Site Editor<\/a>, through resources and practice<\/strong>!<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    As we\u2019ve learned so far, websites are made up of content that is styled to display in a pleasing and functional way \u2013 in short, content and style. WordPress separates where users create the bulk of their content, on Posts and Pages, and the style or design of the website, collected under Appearance. For years, […]<\/p>\n","protected":false},"author":24,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5941","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/5941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/comments?post=5941"}],"version-history":[{"count":9,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/5941\/revisions"}],"predecessor-version":[{"id":5988,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/5941\/revisions\/5988"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/media?parent=5941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}