Title: A light Learn/Lessons visual refresh Author: Joen Asmussen Published: April 29, 2024 Last modified: May 1, 2024 --- [ ](https://profiles.wordpress.org/joen/) [Joen Asmussen](https://profiles.wordpress.org/joen/) 2:12 am _on_ April 29, 2024   # A light Learn/Lessons visual refresh Hi, as part of some of the Learn visual refresh work the design group has been doing( examples, [1](https://make.wordpress.org/design/2024/01/02/design-share-dec-1-dec-29/), [2](https://make.wordpress.org/design/2024/02/26/design-share-feb-12-feb-23/), [3](https://make.wordpress.org/design/2024/04/22/design-share-54-apr-8-apr-26/)) I was asked by [@west7](https://profiles.wordpress.org/west7/) and [@piyopiyofox](https://profiles.wordpress.org/piyopiyofox/) to explore small improvements to Lessons themselves, such as [What is a block?](https://learn.wordpress.org/lesson/what-is-a-block/) In this post, I provided some review as context, and ultimately for your feedback, some of those explorations and suggestions. Example of a lesson as they appear today: [⌊Screenshot of the What is a block lesson.⌉⌊Screenshot of the What is a block lesson .⌉[ This particular lesson is accessed from [here](https://href.li/?https://learn.wordpress.org/course/introduction-to-block-development-build-your-first-custom-block/). A design for said page exists [here](https://www.figma.com/file/ZKaf6u8mIHkAanluWafXAp/Learn?type=design&node-id=2149%3A5996&mode=design&t=WzqN8FU8I6npQ1Uv-1), but for now. Another goal of the visual refresh is to introduce a minimal tab-bar so that there’s a section for readers and for instructors. --- ## High level suggestions * Hide the adminbar. - If you need to be able to log in, [this issue outlines a path forward](https://href.li/?https://github.com/WordPress/wporg-main-2022/issues/420). * Replace the classic blue for hyperlinks with blueberry. * Apply `text-wrap: pretty;` across all text. Ideally this can exist globally across the entire wp.org website, but it should at least be here. * Consider setting a 960px max-width on the main column, and centering it in the canvas similar to how it’s done on [Developer Resources](https://href.li/?https://developer.wordpress.org/advanced-administration/). ## Content suggestions Some of the content stylings we can hopefully fill in a global sense, across the site, so mentioning them here not to be specific to the learn content, but all content. Code syntax highlighting, for example: [⌊Screenshot of code sample.⌉⌊Screenshot of code sample.⌉[ These notices could also use [a new style](https://href.li/?https://www.figma.com/file/HOJTpCFfa3tR0EccUlu0CM/WordPress.org-Design-Library?type=design&node-id=1264%3A4116&mode=design&t=pTVxPaeqM8xneQGi-1): [⌊Screenshot of notices.⌉⌊Screenshot of notices.⌉[ General guidelines for creating screenshots would be useful to formulate. For example, [this page](https://learn.wordpress.org/lesson/build-and-run-your-project/) could benefit from better cropped screenshots, always 2x resolution, ideally one platform, using the modern color scheme to match the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. [https://wordpress.org/](https://wordpress.org/) branding, and boxes and sections of the page using colors from the [new palette](https://href.li/?https://www.figma.com/file/HOJTpCFfa3tR0EccUlu0CM/WordPress.org-Design-Library?type=design&node-id=1%3A2193&mode=design&t=pTVxPaeqM8xneQGi-1). E.g. it may be better to use light blue [a la the notice here](https://developer.wordpress.org/advanced-administration/), or light gray, if those boxes need to be used at all: [⌊Screenshots of boxed paragraphs from the lesson.⌉⌊Screenshots of boxed paragraphs from the lesson.⌉[ ## HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. [⌊Screenshot of the lesson header.⌉⌊Screenshot of the lesson header.⌉[ The WordPress logo exists to take you back to the main Learn section. Outside of a larger change to remove the “immersive” view and add the general WordPress.org header and footers, we can change this to be breadcrumb-like: [⌊Screenshot of a different style of breadcrumbs.⌉⌊Screenshot of a different style of breadcrumbs.⌉[ 1px border below, as well. ## SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. [⌊Screenshot of the lesson sidebar.⌉⌊Screenshot of the lesson sidebar.⌉[ * Replace the usage of Open Sans with Inter. We should do this across, we should be using _only Inter and E.B. Garamond_ fonts. * Update the colors to be shades of charcoal. There will be a mockup at the end tying all these details together, but here’s one snippet: [⌊Screenshot of a suggested sidebar refresh.⌉⌊Screenshot of a suggested sidebar refresh.⌉[ ## Main lesson heading [⌊Screenshot of lesson heading.⌉⌊Screenshot of lesson heading.⌉[ * Remove the left border on “Module 1”, avoid the italic, use Charcoal 5, default font size, default font weight. * Use charcoal color for both headings and text. * The font family is correctly set to EB Garamond, but that web-font is not enqueued, so it doesn’t load. * Body text should be 16px font size, not 18px. ## Buttons The styling is close to the new button style, but could get closer: [⌊Screenshot of buttons.⌉⌊Screenshot of buttons.⌉[ A few changes would make it perfect: 1px border, blueberry text, semibold. [⌊Screenshot of suggested button styles.⌉⌊Screenshot of suggested button styles.⌉[ ## Progressbar [⌊Screenshot of the lesson progressbar.⌉⌊Screenshot of the lesson progressbar.⌉[ If we can keep the gray separator at 1px and overlay a thicker rounded progressbar, that would be ideal: [⌊Screenshot of suggested progressbar. ⌉⌊Screenshot of suggested progressbar. ⌉[ ## Tying it all together [⌊Screenshot of a full suggestion of the visual refresh of the Lesson.⌉⌊Screenshot of a full suggestion of the visual refresh of the Lesson.⌉[ What’s most important on this refresh: * Loading EB Garamond correctly. * Using correct charcoal colors. * Using the WP.org Blueberry color. * Simplifying font sizes, weights, styles across. ## A tab-bar󠀁[](https://dotorgdesign.wordpress.com/2024/04/11/design-qa-learn-lessons/#a-tab-bar)󠁿 An additional ask was a tab-bar for instructors. It could look like this: [⌊Screenshot of the same lesson refresh suggestion as before, but showing a tab- bar on top that would only be visible to instructors. Tabs say Lesson and Instructor Notes.⌉⌊Screenshot of the same lesson refresh suggestion as before, but showing a tab-bar on top that would only be visible to instructors. Tabs say Lesson and Instructor Notes.⌉[ Let me know your thoughts! ### Share this: * [ Threads ](https://make.wordpress.org/training/2024/04/29/a-light-learn-lessons-visual-refresh/?share=threads) * [ Mastodon ](https://make.wordpress.org/training/2024/04/29/a-light-learn-lessons-visual-refresh/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/training/2024/04/29/a-light-learn-lessons-visual-refresh/?share=bluesky) * [ Facebook ](https://make.wordpress.org/training/2024/04/29/a-light-learn-lessons-visual-refresh/?share=facebook) * [ X ](https://make.wordpress.org/training/2024/04/29/a-light-learn-lessons-visual-refresh/?share=x) * [ LinkedIn ](https://make.wordpress.org/training/2024/04/29/a-light-learn-lessons-visual-refresh/?share=linkedin) * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftraining%2F2024%2F04%2F29%2Fa-light-learn-lessons-visual-refresh%2F%23respond&locale=en_US) 1. ![](https://secure.gravatar.com/avatar/a8a3c44a68937ee1996ba1bd3325126c4fd962f20b60acc16988dea6b527d14c? s=32&d=mm&r=g) 2. [Jonathan Bossenger](https://profiles.wordpress.org/psykro/) 6:16 am _on_ April 29, 2024 3. Overall, I do like the suggestions, especially allowing for the wider content width, fonts and colors refresh, and especially the updated notices. 4. I also appreciate the callout to formalize both screenshots and code syntax highlighting. 5. At the moment the training team doesn’t have a formal guideline for screenshots, and it would be great to work with design to formalize these guidelines. 6. For code syntax, I should point out that the code snippet in that lesson is a screenshot. 7. For any code snippets, we are generally using the [default code block](https://wordpress.org/documentation/article/code-block/)( [see example here](https://learn.wordpress.org/lesson/scaffolding-a-new-block/)) which currently to the best of our knowledge doesn’t have language-specific syntax highlighting. It would be wonderful if any styles applied to the code blockBlock Block 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. from the Developer Resources site were also applied to code blocks in lessons. 8. Looking at that screenshot, however, it appears the lesson creator wanted to be able to highlight specific sections of that code, which the code block also doesn’t support, and therefore achieved it with a screenshot. 9. * ![](https://secure.gravatar.com/avatar/0cba87f5d1614b0b60cecc64f3d836608cd944566cce6a01e446ab5e8ed86e35? s=32&d=mm&r=g) * [Joen A.](https://profiles.wordpress.org/joen/) 6:19 am _on_ April 29, 2024 * > Looking at that screenshot, however, it appears the lesson creator wanted > to be able to highlight specific sections of that code, which the code blockBlock > Block 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. > also doesn’t support, and therefore achieved it with a screenshot. * Could a guideline be established to suggest using bold text for such highlight? Can even add a caption noting the emphasis. * If need be, however, the Code block should support color as well: * [⌊Screenshot 2024-04-29 at 08.19.03⌉⌊Screenshot 2024-04-29 at 08.19.03⌉[ 10. ![](https://secure.gravatar.com/avatar/a8a3c44a68937ee1996ba1bd3325126c4fd962f20b60acc16988dea6b527d14c? s=32&d=mm&r=g) 11. [Jonathan Bossenger](https://profiles.wordpress.org/psykro/) 6:54 am _on_ April 29, 2024 12. > Could a guideline be established to suggest using bold text for such highlight? 13. I’m sure we’d be happy to explore any guideline suggestions. As mentioned, we’ve not really had any formal guidelines for screenshots and code snippets, so having that guidance from design would be great. 14. As far as I can tell, while the code blockBlock Block 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. on Learn does support color, it’s only the entire block’s text color that can be changed, and that change does not reflect when the lesson is rendered. Additionally, the code block on Learn currently does not have any of the text formatting options available to the default coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block. I’m not sure if this is a Learn restriction or a .org restriction. 15. Happy to hop on a call with you at some point to run through what we currently have. It’s possible I’m missing something. 16. * ![](https://secure.gravatar.com/avatar/0cba87f5d1614b0b60cecc64f3d836608cd944566cce6a01e446ab5e8ed86e35? s=32&d=mm&r=g) * [Joen A.](https://profiles.wordpress.org/joen/) 6:59 am _on_ April 29, 2024 * > As far as I can tell, while the code blockBlock Block 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. on Learn does > support color, it’s only the entire block’s text color that can be changed, > and that change does not reflect when the lesson is rendered. Additionally, > the code block on Learn currently does not have any of the text formatting > options available to the default coreCore Core is the set of software required > to run WordPress. The Core Development Team builds WordPress. block. I’m > not sure if this is a Learn restriction or a .org restriction. * That seems worth revisiting in a refresh. But just for clarity as to what I was referring to, here’s a GIF of the code block, using the inline color option: * [⌊code block⌉⌊code block⌉[ * I’m happy to sync up any time, I’m easy to find, happy to help. - ![](https://secure.gravatar.com/avatar/a8a3c44a68937ee1996ba1bd3325126c4fd962f20b60acc16988dea6b527d14c? s=32&d=mm&r=g) - [Jonathan Bossenger](https://profiles.wordpress.org/psykro/) 7:19 am _on_ April 29, 2024 - Follow-up, Joen and I had a quick chat about this, and it looks like it might be something we just need to enable for Learn. I’ll look into this in the coming week. * ![](https://secure.gravatar.com/avatar/0cba87f5d1614b0b60cecc64f3d836608cd944566cce6a01e446ab5e8ed86e35? s=32&d=mm&r=g) * [Joen A.](https://profiles.wordpress.org/joen/) 7:22 am _on_ April 29, 2024 * 👌 - ![](https://secure.gravatar.com/avatar/a8a3c44a68937ee1996ba1bd3325126c4fd962f20b60acc16988dea6b527d14c? s=32&d=mm&r=g) - [Jonathan Bossenger](https://profiles.wordpress.org/psykro/) 3:18 pm _on_ April 29, 2024 - Aha, I just remembered (when [spinning up the local environment](https://github.com/WordPress/Learn)) that Learn is still using a Classic theme, so this will possibly have to wait until [the new block theme is developed](https://github.com/WordPress/Learn/pull/2397). * ![](https://secure.gravatar.com/avatar/0cba87f5d1614b0b60cecc64f3d836608cd944566cce6a01e446ab5e8ed86e35? s=32&d=mm&r=g) * [Joen A.](https://profiles.wordpress.org/joen/) 6:39 am _on_ April 30, 2024 * Ah, sounds good 👍 17. ![](https://secure.gravatar.com/avatar/e7b27b178ff5a141aa26976d2f17272a6483508f92d4fc6a210bcf8df560921f? s=32&d=mm&r=g) 18. [Courtney Robertson](https://profiles.wordpress.org/courane01/) 9:33 pm _on_ May 6, 2024 19. The historical screenshot process is reflected here: 20. [https://learn.wordpress.org/lesson-plan/best-practices-when-capturing-images/](https://learn.wordpress.org/lesson-plan/best-practices-when-capturing-images/). This goes back to the standards the team has had since 2014. 21. And was reworked here: [https://learn.wordpress.org/tutorial/best-practices-for-capturing-images/](https://learn.wordpress.org/tutorial/best-practices-for-capturing-images/) 22. Additional older information can be found here: [https://make.wordpress.org/training/handbook/lesson-plans/lesson-plan-style-guide](https://make.wordpress.org/training/handbook/lesson-plans/lesson-plan-style-guide) 23. * ![](https://secure.gravatar.com/avatar/a8a3c44a68937ee1996ba1bd3325126c4fd962f20b60acc16988dea6b527d14c? s=32&d=mm&r=g) * [Jonathan Bossenger](https://profiles.wordpress.org/psykro/) 6:14 am _on_ May 7, 2024 * Ah, thanks [@courane01](https://profiles.wordpress.org/courane01/), I wasn’t aware this was in a lesson plan. It would be cool if we could add this to our handbook somewhere, and expand/update it from there. I’m sure many training team contributors will check the handbook first, before looking for this information in a lesson plan. ### Leave a Reply 󠀁[Cancel reply](https://make.wordpress.org/training/2024/04/29/a-light-learn-lessons-visual-refresh/?output_format=md#respond)󠁿 You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftraining%2F2024%2F04%2F29%2Fa-light-learn-lessons-visual-refresh%2F&locale=en_US) to post a comment. This site uses Akismet to reduce spam. [Learn how your comment data is processed.](https://akismet.com/privacy/) # Post navigation [← Training Team Meeting Recap – 18th April 2024](https://make.wordpress.org/training/2024/04/24/training-team-meeting-recap-18th-april-2024/) [Training Team Meeting Recap – 25th April 2024 →](https://make.wordpress.org/training/2024/05/01/training-team-meeting-recap-25th-april-2024/)