Block Guide

Welcome to your guide for the blocks and patterns on the website as of June 2022, their intended use, function, and general use guidelines. The goal is to show examples and explain the intended use-cases for these blocks while offering helpful tips and tricks to ensure the best fit for content both with images and copy length. Where possible there will be the actual block on the page, and in other cases there may be screenshots used to illustrate where certain settings are to configure the block/pattern.

Table Of Contents

~ The Block Editor ~

WordPress’ block editor (also called Gutenberg interchangeably) has a few areas that are important and useful to familiarize yourself with while editing.

The List View

The List View

Highlighted in green (if it’s hidden, select the three staggered horizontal lines button at the top left of the top toolbar) is a handy overview showing you a hierarchy view of blocks and patterns and their child components.

This is extremely useful in troubleshooting visual glitches, as you can click/select a block in the main content editor area in the middle, and it will be highlighted blue in the list view to show you where it is located in the hierarchy.

Things to look out for: If you think there is a visual glitch, often it is the result of a hidden or ’empty’ component stuck somewhere it shouldn’t be. (For example an ‘image’ component with no image selected.) The component will likely take up some invisible space, causing layout shifts and wonkiness. The list view should show you any components that may not be obvious in the main content area in the middle and allow you to select it in the ‘list view’ and remove it if necessary.

The sidebar

There are two tabs on the sidebar—Page and Block—which by default shows up on the right. If it is hidden, select the cog icon above it.

The ‘Page’ tab has drop-downs for various settings related to the whole page/post. In this ‘Page’ tab, you can edit things like the permalink, the featured image, etc.

In the ‘Block’ tab, there are sometimes color, text, typography, and preset style options usually. As well as in the advanced dropdown there is a text field where you can add custom classes and html anchors (useful for adding anchor links).

Toolbar

Toolbar

The Toolbar appears when you select a block in the main content editing section. This changes depending on the type of block/component you are selecting. It has options for alignment and text size if it is a text component. If it is an image component, it may have a button to replace or crop an image. It entirely depends on the type of block/component selected.

~ Custom Blocks ~

Quick note, here on core vs. custom blocks.

Core blocks: These come standard with WordPress and are smaller in scope; things like paragraph, heading, image, list, gallery, column, rows, and other basic building blocks of the website.

Custom blocks: These blocks are made via code by Madden Media and often offer more advanced functionality; things like a listing view of events/wineries/lodging accommodations. They are often dynamic or solve a stylistic or functional niche that core blocks can’t.

Here is the current list of custom blocks, most will have a working example (the actual block is on this page vs a screenshot) followed by a quick overview of it’s purpose and best practices.

Image Box

Image Box

This is an example of the types of content that you can fit here in this Image Box

There are various preset styles for the image box, these include things like where the overhang is of the text box area, and whether there is an acorn logo present in the image box. Those can be found by selecting the ‘Image Box’ Parent component in the list view (it can be tricky selecting it in the main content editor, then you can see those styles on the right sidebar under the ‘Block’ tab.

Preset styles for the Image Box block

Category Slider

The category slider block is one of the older blocks that is designed to pull in POI listings and display them in a simple slider. It allows for you to select the category on the back end, as well as whether the POI needs to be in ALL of the selected categories or just one of the ones you select.

It also has a legacy option I think about not displaying seasonal content, although I’m not sure if that is still applicable. In the past there was some concern about seasonal events showing up at the wrong time.

This block is used less on the site now as newer category listing blocks have been made which show off POIs in a more elegant way. But this block could still be used to highlight places in a certain category in a brief and clean way.

Here is an example of the settings

Here is an example of the block.

Otis Events Slider

This is another ‘legacy’ block. It can correctly pull in some events that we import from OTIS into our site, however, it doesn’t benefit from the corrections and fine-tuning done for the more robust ‘events grid’, The new events grid block should be the true home of events on the site as it takes into account recurring events and other date/time quirks. This one is/should be phased out and users redirected to the events page for a better user experience.

Featured Post Slider

This is a nice block to feature a couple of posts. On the back end, there is simple way to select as many posts as you desire, each showing up as one slide in the slider with all the relevant information pre-filled. Nice if you have related and specific posts you want to highlight ( for a theme or holiday for example.

Otis Category List

This is a more robust and fancier way to show off POIs for different categories. This will display a sortable vertical list which also conveniently has phone numbers and a link out to the website of the business.

Primary uses are for specific and focused displays of POIs by region, for example, showcasing the wineries for the wine page. Restaurants and lodging would also be decent use-cases for this block.

Back end controls

Example Block

Placemat Map

This is primarily shown on the homepage but in theory could be used in other places on the site. It gives an interactive overview of the four regions. The back end allows you to set the copy for each region and the default text for when no region is selected.

211 213 214 221 219 226 228 58

Willamette Valley

FAQ Block

This block allows you to add a dropdown FAQ section. You can add a question, which is shown in large text, and then define its answer in a rich text field, allowing you to include links is needed. Each question also has an option to start open. The original intent was the first few questions start open, letting users know to click each question to expand/collapse the answer for readability. The block is essentially a stylized traditional accordion element but can handle as many questions as you like.

Back End Options

Block Example

Here is the first question?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa tempore eaque asperiores nam quis quisquam saepe sunt eveniet eligendi, temporibus harum ab! Ea est tempora excepturi, libero voluptatum nesciunt voluptatibus?
Here is the second question, it starts closed if you want?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa tempore eaque asperiores nam quis quisquam saepe sunt eveniet eligendi, temporibus harum ab! Ea est tempora excepturi, libero voluptatum nesciunt voluptatibus?
Third Question and so on?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa tempore eaque asperiores nam quis quisquam saepe sunt eveniet eligendi, temporibus harum ab! Ea est tempora excepturi, libero voluptatum nesciunt voluptatibus?

~ Post Blocks ~

These blocks are intended to only be used on posts, for consistency and to help visually distinguish what is a post vs. what is a page.

Post Image Slider Block

This is a full bleed image gallery. It can live anywhere you like but the intention is for this block to reside within a post. It will go full width and will let users cycle through a gallery of images. You can add as many images you want to this block in the backend. Image proportions don’t matter as much here as the slider will compensate for that.

Image with Left Text

This is a simple block designed to resemble more of a magazine layout, used in posts by design. You can select an image which will take up the right side of the website. The left side is a flexible content area of text and will respect the bounding container of posts.

This is to give a more print-style layout to posts. The flexible content section can handle text but also any block is eligible to go in there, including lists or even other images.

Optional Title Goes Here or Remove Me

Insert your text here.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa tempore eaque asperiores nam quis quisquam saepe sunt eveniet eligendi, temporibus harum ab! Ea est tempora excepturi, libero voluptatum nesciunt voluptatibus?

Image with Right Text

This is exactly the same as the image with left text block, just flipped.

Optional Title Goes Here or Remove Me

Insert your text here.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa tempore eaque asperiores nam quis quisquam saepe sunt eveniet eligendi, temporibus harum ab! Ea est tempora excepturi, libero voluptatum nesciunt voluptatibus?

~ Block Patterns ~

These are block patterns, they differ from blocks in that they are primarily a custom grouping ‘pattern’ of core WordPress blocks. We use a combination of custom CSS classes working within the confines of the block editor to create these layouts. Traditionally they don’t offer a ton of custom functionality apart from what comes in a core block (images, text, etc.).

Meet Our Staff

This block pattern allows you to show off a staff member. Ideally you use a portrait photo of the staff member and then in the content section you can list their title and contact info and bio information.

Dawnielle Tehama, Executive Director, Willamette Valley Visitors Association

Dawnielle Tehama

Executive Director

dawnielle@oregonwinecountry.org

Dawnielle Tehama brings a wealth of experience to her role as WVVA’s executive director. She has worked with public lands groups; state and county parks; national parks and monuments and federal agencies. Her branding, strategy, creative development, and media background allow her to promote the Willamette Valley’s beauty and bounty in an ethically responsible and sustainable way. She is also the proud mother of two teenage daughters.

Image Block Columns / Arrangements

There are multiple versions of these boxes in different arrangements, but they all work similarly. They are all different arrangements of the image box block. There are 2×2 grids, 5 block arrangements, 4 blocks in a row, and others.

To edit use the list view to find the image boxes which allows you to select the photo for the image box..

By default the ‘image box’ will be blank when viewing which can be confusing. You don’t need to add in an image component. Just select the ‘image box’ component either in the editor area or list view and click the pencil icon to edit, that will let you define the image. You then can edit the heading component which is a child of the image box. It is advised to also add the link to this heading so users can click the title and be taken to the page/post desired.

list view structure

Block Example

asdfasdfasdf

asdfaskdfkjahsdfkjha

asdfasdfasdf

asdfaskdfkjahsdfkjha

Image with transparent Text Box

This is a commonly used block and lets you define a wide image as a background, then add in copy in a transparent box over top. By default there is also a button allowing this to be used as a highlight section, for example on the homepage, to take users deeper into a topic and to a more in-depth page.

Tasting Rooms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ac magna interdum interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ac magna interdum interdum.

Hazelnut List

This is similar to the image with right text block, but this is prefilled as a list. The dots (in the editor, they appear as dots) on the frontend will display as hazelnuts instead.

List Category

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

Patterned Background Text

This allows you to put text/blocks over a nice patterned tan background. That background is custom and can’t be changed but developers would be able to add in another option for a background pattern if needed easily.

outdoors & recreation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ac magna interdum interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ac magna interdum interdum.