Learning Mode

Site Editor navigation

The Site Editor allows creators to modify and create layouts that are shared between many different pages and posts. Each different layout is called a Template and every change done to a Template will reflect on all pages and posts which are using it. Although this guide will teach you the basics of using the Site Editor, you can learn more by reading the official guide here.

Sensei’s Learning Mode is built using the Site Editor and every different layout is essentially a Site Editor Template. To see all available Templates, you can visit ‘Appearance’ -> ‘Editor’, click the icon in the top left corner and select ‘Templates’.

Site Editor Templates

In the above example, this site has two Templates coming from Sensei and three Templates from Twenty Twenty-Two theme. If you are not using a block theme, only the Templates from Sensei are going to be available. Clicking on a Template will open it on the Site Editor to customize it. Similarly with posts, to save the changes you need to click ‘Update’.

Modified Learning Mode Template

A customized Template icon will appear with a blue dot on top of it. In the dropdown menu, you can revert all customizations and return to the Template’s original state. Be careful however, as your changes are going to be lost permanently.

Customizing the Template’s blocks

Any Template is comprised of blocks, in a similar way to the post content. When you add a block to a Template, this block will appear in every post that uses this template. WordPress provides Theme Blocks to allow users to add content which is relevant for many pages and posts. One example is the Post Content block which is represented as a placeholder in the Site Editor however in the front-end its contents will be replaced with the actual post content. Other examples of such blocks include the Post Title or the Site Logo. In this section, we will learn how you can rearrange, add and remove blocks to a Template.

The List View

The List View displays all the blocks that are included in a Template in a hierarchical way.

Sensei’s Site Editor blocks have a green color.

This is a locked block. Sensei developers will generally mark blocks as locked in cases where removing and/or moving the block will break part of Sensei’s functionality. Only unlock a block if you are aware of the consequences.

Hierarchy levels are seperated by indents. In this specific case, the ‘Fixed Header’ block contains ‘Row’ and ‘Course Progress Bar’ blocks. The ‘Row’ in turn contains two other ‘Rows’.

Use this button to open or close the List View.

The List View

The List View is a very useful tool to analyze the blocks contained in a Template. For example, in the above screenshot the basic blocks for the default Learning Mode layout are displayed. On top is the Fixed Header which contains a Row with the buttons and the course title and the Course Progress Bar beneath it. The rest of the page is defined by a Two-column Layout, which contains the Sidebar and the lesson’s Main Content. Click on the image’s hotspots for a few more details.

Removing and Adding blocks

Learning Mode templates try to include the Sensei components that make sense for the majority of the users. However, some of the components might not suit your needs. For example, let’s suppose that you don’t want to allow the students to contact you and you need to remove the ‘Contact Teacher’ block. To remove it:

  1. Select the block either in List View or in Site Editor.
  2. Open the dropdown menu.
  3. Select the option ‘Remove’ followed by the block name.
Removing a block

Now let’s suppose that you want to use the emptied space to promote some other page by adding a button. To add a block you can either use the ‘+’ button or you add it closely to another block. More specifically:

  1. Select an adjacent block.
  2. Open the dropdown menu.
  3. Select ‘Insert before’ or ‘Insert after’
  4. Type ‘/’ and the name of the block that you want to add.
Adding a block

Rearranging blocks

Blocks can be also rearranged to change the Learning Mode layout. You can rearrange blocks using either drag and drop or the move buttons.

Moving a block in the editor

Alternatively, you can use List View with the added benefit that you will gain a better understanding of the resulting block hierarchy.

Moving a block in List View