Cheat Sheet


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:

  • Block Editor/ Page Editor/ Page Content: This big area is where you lay out your page with blocks and content.
  • 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. 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:

Link Box Repeater

This creates a repeater field to bring in multiple info boxes where you can define an image, description, link, and more. You can choose your “Link Box Type” for the block, and select either a column view or a slider view.

Title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Compass Photo

Inserts a circular photo with a compass background.

Project Listing

This displays posts within the “Projects” custom post type. Projects can be added via the sidebar in wp-admin. This block can take in a few different customizations such as Project Type and Number of posts to be shown.

Fact Sheet Listing

This block brings in posts from the “Fact Sheet” custom post type. Fact sheets can be added under the “Projects” tab in the wp-admin sidebar. This block can take a few customizations, such as a tri-column design or a slider design, and max post number. The field “Show Header” will show the title “Fact Sheets” along with a link to view all Fact Sheets.

Publication Listing

This block brings in posts from the “Publication” custom post type. Publications can be added under the “Projects” tab in the wp-admin sidebar. This block can take a few customizations, such as a tri-column design or a slider design, and max post number. The field “Show Header” will show the title “Publications” along with a link to view all Publications.

Organization Listing

This block brings in posts from the “Organization” custom post type. Organizations can be added under the “Projects” tab in the wp-admin sidebar. This block can take a few customizations, such as a quad-column logo’s only design or a listing view, as well max post number. The field “Show Header” will show the title “Organizations” along with a link to view all Organizations.

Continuing Education Intro Section

This will bring in a full-row section that lets you choose a title, description and then a repeater that lays out multiple icons/images with a title and link within each. You can now choose how many columns per row the boxes take up with the field “Columns per Row”.

Research Intro Boxes

Will show a tri-column view of info boxes that let you bring in a photo, title, link and description on each.

Sample Below

Events List

Brings in the 3 most recent events, entered into the Tribe Events Plugin (“Events” tab in the wp-admin sidebar)

Upcoming Events

Apr

28

2021

April Rounds Ft. Lennie Burke

This presentation will provide an overview of two cases involving Do Not Resuscitate Orders(DNRO). The factors used in decision-making will be reviewed. Those factors and the resulting decisions will be reconsidered in light of new policies regarding a guardian’s authority to agree to a DNRO.

May

6

2021

May Support Group

May

18

2021

May Networking

Logo Links

This brings in a repeater that will display any number of grayscale logos that go to a link of your choosing.


Custom Gutenberg


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

Group Block with background color

Groups can contain other blocks and column blocks. Edit background and text colors in the block settings in the page editor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Full Width Group Block with background color

Groups can contain other blocks and column blocks. Edit background and text colors in the block settings in the page editor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Group Block with background color and “Alternate” style.

Groups can contain other blocks and column blocks. Edit background and text colors in the block settings in the page editor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Full Width Group Block with background color and “Compass Box” style.

Groups can contain other blocks and column blocks. Edit background and text colors in the block settings in the page editor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

List Block (standard style)

  • List item 1
  • List item 2
  • List item 3
  • List item 4

List Block (arrow style)

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Optional citation

Buttons

Images

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

Education
Large Size
Education
Short and Wide Size
Education
4:3 Aspect Ratio

Custom Post Types


Projects

The Project custom post type holds a number of sub-post-types under it. Projects can be accessed in the left-hand column of the wp-admin sidebar.

Within each project, you can choose to display associated Publications, Fact Sheets, as well as associated organizations.

Projects are categorized by their “Project Type”, which can be chosen or added within each Project in the Page Options in the right-hand sidebar. You can also manage your Project Types by clicking “Project Types” under “Projects” in the wp-admin sidebar.

Projects can also have a cover image that will display wherever Projects are being pulled in.

Publications

A sub-post-type of Projects. You can add a link to document representing the each publication. Each publication can also have Fact Sheets tied to it. This list of Fact Sheets is generated by the Fact Sheets custom post type (see below).

When publications are selected within each Project, the Project will show all Publications and their associated Fact Sheets.

Publications display as their own post, which means you can add content to each one.

Publications can also have a cover image that will display wherever Publications are being pulled in.

Fact Sheets

Fact sheets have the custom field “Fact Sheet File” that you can link to your fact sheet document. Once a fact sheet is created, it can be tied to a Publication within the Publication post type.

Note, if no fact sheet file is attached within a Fact Sheet, then when you click on a Fact Sheet on the front-end, it will go to an actual page, that will display the content put into the back-end of the Fact Sheet post.

Fact sheets can be categorized by “Fact Sheet Categories” in the right’hand sidebar when you are editing the post. These categories can be managed by clicking “Fact Sheet Categories” in the left-hand wp-admin sidebar.

Fact sheets can also have a cover image that will display wherever Fact Sheets are being pulled in.

Organizations

This post type holds posts that show research organization s, can can be tied to a Project. Organizations can take in a logo file under “Organization Cover Image” as well as a link to the Organization’s website. You can also put content within each post.

Staff

Adding a staff post will make an item that shows up on the Staff page. Staff posts can hold a bio (the post content) and also a custom field for job title. Setting a featured image will let you display their headshot.


Theme Settings


Header

In the Header tab, you can switch our your logo, or populate the side content with modules. Custom modules include a search bar, icon links, and a general content block. This is what is known as a “flexible content” field that you can put as many modules as you’d like, and they will show from left to right.

If you want to customize the navigation menu, you would use the regular WordPress Menu settings in the wp-admin sidebar under Appearence > Menus.

Footer

The footer tab makes use of a “flexible content” field that lets you create columns that contain content or custom modules.

Clicking the “Add Column” button lets you add a column, and you can choose it’s width. Columns will drop to another row once the row is filled. Columns go from left to right, top to bottom.

Within each column, you can add custom modules. Modules include:

  • Content: Places a WYSIWYG field so you can enter in whatever content you’d like
  • Separator: Inserts a horizontal rule
  • Main Phone Number: Puts in your main phone number, defined in the “Contact” tab in Theme Settings
  • Social Links: Adds a social links repeater that lets you choose icons and their associated links
  • Main Email: Puts in your main contact email, defined in the “Contact” tab in Theme Settings

Each column can have multiple modules.

Contact

Has fields to let you customize your contact information, that can be pulled into different parts of your site, so when you update the information here, it will update in all places that are linked to these fields (at the moment, only the footer is linked).


Misc


NEW! Flip Book for Fact Sheets and Publications

We have added the 3D Flip Book plugin. Find 3D FlipBook in the wp-admin sidebar and add a new flipbook. There are many options in this screen but you only need to pay attention to a couple things. I have highlighted these 3 things in red in the screenshot below.

First, upload a new PDF. It will automatically generate a thumbnail image based on the first page. Then choose “Volumetric with paddings” for the book style. This will make the book look thicker and add shadows to books with more pages. Note that on books with hardly any pages, they will appear more flat. On books with many pages this is more noticeable.

Now, when you are adding a Fact Sheet or Publication, there is a new field “Fact Sheet Format” or “Publication Display Type” depending on if its a Publication or Fact Sheet. Choose Flipbook and then below that, a dropdown should appear letting you choose the corresponding Flipbook to your publication or fact sheet. For fact sheets it will bring in a preview of the PDF on the front end that you can click and it will go to a full screen version of the flipbook. For publications, it will show up as the button on the Publication post called “Read the Full Document”. Upon clicking this it will bring up a full screen lightbox with the flip book inside.

Pages

Pages have a hierarchy of top-level parent pages and sub-pages. Top level parent pages have a slightly different title area that supports a featured image. The sub-pages are more minimal and do not support featured images, and instead display breadcrumbs to get back to the top level-page they’re under.

Also, please note that the Home page has a custom field to fill out for the page description, that will show under the page header.

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

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.