Block Editor

Blocks can be added in any page or post. To add a new block in the editor, simply click into the content and press “Enter” on your keyboard, creating a new line. The “+” icon should come up, which you can click and choose a new block. You can also optionally start typing and it will by default add your typed text into a paragraph block.

See the diagrams below for a quick outline of the pieces of a single post or page:

Note in the diagrams we have labeled some things:

• Page Title: Define your page title here.
• Block Editor/ Page Editor/ Page Content: This big area is where you lay out your page with blocks and content.
• In-Page Custom Fields: Certain pages and posts will have custom fields you can fill out to complete the layout. These fields are baked into these pages and work independently from blocks.
• Right Sidebar: This holds your Page Settings and Block Settings
• Page settings: This lets you define things in the page such as the featured image, the page slug (url), categories and more.
• Block Settings: These settings pertain to the block you have highlighted in the Block Editor.
• Left Sidebar/ Wp-admin sidebar: This is the navigation for the wordpress backend.

Custom Blocks

In addition to the standard Gutenberg blocks, we have also created several custom blocks based on the site comp.

Note: If you would like to bring up all custom blocks, when you create a new block, click “browse all” and then search for “sperling”. It will bring up all the blocks you see below:

Home Hero

These fields control the hero area. You can define the section to show either an uploaded video or a slider. This block can be used on any page but please note it was only designed to be used on the homepage.

This area also brings in the Secondary Header below it.

If you only one there to be one static background image, choose “Slider” and just set one image.

We have added a “Vertical Position” field to each slider image you choose so you can fine-tune the background position of the photo. This was added to combat odd cropping and heads getting cut off from view with photos of people. By default, the vertical position is Center, but you can choose Top, Bottom or Percentage as well. Percentage will let you enter the percent from top to bottom where you want the photo’s background position to originate from.

If you choose “Video”, you will also need to define a fallback image for mobile, since a background image is much better suited for mobile optimization.

In this area you also have some intro text that overlays your media and a button in which you can customize the link and wording.

Recent News Boxes

This block will show the 3 newest News posts from the website. News posts are housed in the default “Posts” area of WordPress. If no posts exist, the block will not show. This block also shows a button that leads to the News page to view more articles.

RECENT NEWS

View More News

Uncategorized

October 9, 2024

Sanotskyi Family ‘Varenyky’ Proves Popular at Bentley Academy Lunchtime

Learn More

Uncategorized

October 7, 2024

VIEW GALLERY: Salem Public Schools at Haunted Happenings Grand Parade

Learn More

Uncategorized

September 27, 2024

Salem High School Sees Historic Marks in MCAS and Accountability Results

Learn More

Testimonial Slider

This block is a repeater that will let you show one or several testimonials in slider format. This block also features an optional photo area to feature 2 static photos. It is recommended that you do not use this block within small spaces such as within a column, as the horizonal width of the block is quite large.

”

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

John Doe

Father of Student

”

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

John Doe

Father of Student

”

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

John Doe

Father of Student

Stat Counters

Each stat counter block will display one statistic. Within each statistic, you can pass through a number, a symbol before and/or after the number, and the name of the statistic.

Icon Box Repeater

Icon boxes can be displayed in either rows of 2 or 3 per row. Each icon box can house an icon, header, body text and link. If a link is defined, the box will become clickable on the front end, and a “Learn More” button will also show within the box. The concept of these boxes is to be used as either an introduction to a page you will be linking to, or just a stylized general box of content.

Team Listing

A team listing block will show a grid of team members who have been previously set up within the “Team” custom post type. Within this block you can optionally display one or several categories of team members, which is set up within each individual team member. If you would like to show all team members, just leave the category blank when setting up the block/. You can also choose to show/hide the team members’ featured photos in the block.

The block pulls in the team member name, title, pronouns and email address. If certain fields are left blank within each team member, they will just not show. If a bio has been written in the team member in question, their box will link over to their bio.

Liz Rogers

(she/her)

Principal

Email

978-265-4038

Yamilis Cruz

Assistant Principal

Email

978-587-4942

Ana Laguarda

(She/Her)

Special Education Team Chairperson

Email

781-771-0984

Accordion

The accordion block is a repeater field that lets you display a group of openable/collapsable toggles. Each accordion segment can contain a header and body content.

Secondary Link Buttons

The secondary link buttons block was created to show a grouping of secondary pages within a section, although you can display any pages/posts that exist currently on the site. These buttons will show in order, 3 to a row.

Custom Gutenberg

We have also customized some of the built-in Gutenberg functionality based on your site comp. Please see examples below:

This singular column has the style “Vertically Center Inner” applied to it. This is best used when you want to vertically center only one column’s content.

Buttons

Images

Images have a few crop sizes to choose from. Here are a few:

In-Page Custom Fields

1 page within this theme so far has page-only custom fields baked into their page templates. This page is the Contact page.

Contact: Leadership Repeater

This is a repeater field where you can set some main contacts for each school. Each contact can display the person’s name, title, phone and email. Contacts are shown in rows of 3.

Contact: Contact Icon Buttons

This is a repeater field that lets you display a number of buttons, in rows of 2. You can customize each button’s link, title and icon.

Custom Post Types

Team

Team members can be added which in turn show within the “Team Listing” block. Team members can be customized with a photo, bio, title, pronouns and more. They can also be categorized.

TablePress

Tablepress is a plugin that lets you create tables. Once a table is created you can then place it’s shortcode anywhere in the site to display it. Learn more here: https://tablepress.org/ . You can also learn about the responsive tables extension we also have running on this website, and how to apply it to certain tables here: https://tablepress.org/extensions/responsive-tables/

Theme Settings

Theme settings are global custom fields that show up in multiple places on the site, usually in the header or footer. This area is where you can customize things such as the site’s logo, social links, emergency banner, main contact information and more.

Theme settings can be located in the WordPress Admin Sidebar > Theme Settings.

Branding

This lets you control site logo, and social links.

Contact

This lets you input the school’s main address, phone, fax, and Google map.

Alerts

This lets you set the alert bar message and expiration date.

Menus

There are a number of different menus used on this site. The can be accessed via the WordPress Admin sidebar under Appearance > Menus. Each menu uses a drag and drop format to set up which pages and links you want to show within it.

Main Menu

This is the main navigation of the website, shown in the header. This menu uses what is known as a “mega menu”. See screenshot below to see the button to click in order to customize your mega menu.

Once in the mega menu customization screen, you can rearrange your child (sub-page) links, as well as add widgets to a grid-link format. the most commonly used widget for this theme is the “Text” widget, which has been brought in under each sub-page to show a brief description.

Secondary Menu

This is the secondary navigation of the website. Shown just above the footer on all pages and also under the hero area on the homepage. Each menu item also has a field to inset an icon next to each link.

Footer Menu

This navigation is shown in the footer

I WANT TO Menu

This navigation is shown as a dropdown in the site header, above the main menu.

MISC

Helper Classes

Depending on your comfort level, you can also customize your Gutenberg layout elements further with classes. You can insert classes into the element’s block settings on the right hand side of the block editor. The following classes can pre-set margins and paddings, as well as font sizes.

• header-large: makes the text as large as a normal h1
• header-medium: makes the text as large as a normal h2
• header-small: makes the text as large as a normal h4
• standard-text: makes text the normal text size
• small-text: makes small text
• smaller-text: makes really small text

Margins and Paddings

You can define margin or padding on any element by using the spacer helper classes. These classes go in all directions and go up to 50 pixels, in intervals of 10. For example: m-0 will give an element 0 margin all around. mb-10 stands for “margin bottom 10” and will add 10 pixels or margin on the bottom of an element. Same goes for padding. pl-50 will give an element 50 pixels of padding on the left hand side. p-0 will take away all padding on the whole element. Elements can have multiple classes. Experiment with these and have fun!

Remember!

This site is FULLY CUSTOMIZABLE! If you need additional functionality or flexibility with any Gutenberg blocks, custom fields, site structure or anything else, please request it and we at Sperling can make it happen.