Block Guide

Welcome to your guide for the blocks and patterns on the website as of July 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, which we call List View.

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, additional black spaces between blocks, and general 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).

Note: To add an anchor link, click on any element and look under the advanced dropdown on the sidebar.

There is an input title HTML anchor and you are able to add a word or phrase there. This becomes an ‘anchor’. There is a brief description of this given by WordPress and more info which you should read if you want to learn more.

The gist is, whichever word you put there you can add to the url for the page. For example:

you type ‘anchor‘ into the field. This means your anchor is ‘#anchor‘ so you can jump to this element from anywhere on the internet by adding the anchor to the end of the page url it is on. Example: https://willamettevalley.org/some-page/#anchor

It’s called a jump link sometimes because lets say you are on a page, and the anchor link is for an element on the same page just further down, then clicking the full url for the anchor link will ‘jump’ the browser down to that element.

That’s how the table of contents works here on this page and is useful if you want to take users directly to a section and not just to the page that section is on.

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 its 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.

To change the image and select styles you may need to first select the ‘image box’ component in the list view to the left. This will show you styles on the right sidebar, it will also pop up the image box’s toolbar where you can find the pencil icon. Clicking this will allow you to select a new image.

Note: We almost always pick the ‘full-width-center’ preset, so it is wise to pick that or experiment with the other presets, although in recent memory we have not used other presets.

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 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.

Note: There is a bug in the way WordPress dynamically pulls in categories. It will automatically default to ‘Dine & Drink’. You need to first just save the block once, then you can go back in and choose the correct categories you wish to display in the category slider.

Here is an example of the block.

Here is an example of the settings

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.

An example of the block in the editor. For reference.

Featured Post Slider

This is a nice block to feature a couple of posts. On the back end, there is a 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.)

An example of the block in the editor. For reference.

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 (which is too large to screenshot here but is fairly simple and straightforward) 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 if needed. Each question also has an option to start open. The original intent was for the first few questions to start open, letting users know to click each question to expand/collapse the answer for readability. The open questions are also good for Google to find to use as answers to questions people search. 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?

Itinerary Map Block

This map allows you to simply pull in otis listings and display them on a map, and the map handles the tabs and mobile functionality depending on the number of locations selected. All info is pulled in via OTIS so the only thing you have to do to implement it is to simply select the locations.

The backend looks like this.

Additionally, for example, if you are using the block within a story/post or page and want the user after clicking a map point to 'read more' about that location further down the page, you can specify an anchor link tag, and, if you've added the same text string (ex: 'anderson-vineyard') to both the Anchor Link field in the map and to some text/heading somewhere else on the page, a read more button will show up allowing you to jump up or down in a page to the related text.

Location of the HTML anchor field for reference.

If the HTML anchor and the anchor link field in the itinerary map ae the same, the map pin popup will link out to that text somewhere else on the page. The anchored text must be on the same page.

~ Post Blocks ~

These blocks are intended to only be used on posts, for consistency and to help visually distinguish a post vs. 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 as you want to this block in the backend. Image proportions don't matter as much here, as the slider will compensate for that.

An example of this block in the editor. It is a gallery so you can add as many images here as you'd like.

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 that 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?

Here is an example of this block in the editor. Note, the Image with Right Text block below has the exact same editor layout in the backend.

Image with Right Text

This is exactly the same as the image with the 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.).

You can find these by clicking the blue + in the upper left-hand corner and clicking PATTERNS.

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.

Example of the block in the back end. It is simple an image on the left and text on the right in a sort of 2 column pattern.

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 2x2 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

Here is just an example of a 2x2 grid. They are simply Image Box components stuck into various column configurations. Remember to change an image you should click on the 'Image Box' component, this pops up the little pencil icon allowing you to edit/replace the image.

Here is an example of what that looks like in the backend.

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 the right text block, but this is prefilled as a list. The dots in the editor on the frontend will display as hazelnuts instead. On the backend, the list dots will not show as hazelnuts, that is a CSS trick that only shows up on the frontend.

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. 

Here is what the hazelnut list looks like on the backend. A little tricky, but to confirm it's working, view/preview the actual page or post to see the hazelnuts working.

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.

This block is fairly straightforward and looks similar on the backend editor as it does on the frontend.

Image Left With Button

This pattern is just a quick way to add a two-column layout. With an image on the left and some text on the right. This pattern includes a button which you can edit the link of to make a nice CTA. This is the most common use of this block.

Here is an example of how the block looks.

tasting rooms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ac magna interdum interdum. Ut consequat sapien ut elit pharetra vestibulum. Sed sagittis accumsan dui ut tempor. Cras ullamcorper luctus

An example of that block on the backend is below.

Image Right With Button

This is exactly the same as the pattern above, the 'Image Left With Button', just the image is on the right and the text and button is on the left. Also used commonly as a CTA, see above for more info.

Example of the block.

tasting rooms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ac magna interdum interdum. Ut consequat sapien ut elit pharetra vestibulum. Sed sagittis accumsan dui ut tempor. Cras ullamcorper luctus

Image Left No Button

This pattern is just a quick way to add a two-column layout. With an image on the left and some text on the right. This one doesn't have a button that comes with it, if you want a button under the text, for example, to use as a CTA, use the 'Image Right with Button' or 'Image Left with Button' pattern described above.

Here is an example of how the block looks.

reserve a spot

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ac magna interdum interdum. Ut consequat sapien ut elit pharetra vestibulum. Sed sagittis accumsan dui ut tempor. Cras ullamcorper luctus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ac magna interdum interdum. Ut consequat sapien ut elit pharetra vestibulum. Sed sagittis accumsan dui ut tempor. Cras ullamcorper luctus

An example of that block on the backend is below.

Image Right No Button

This is exactly the same as the pattern above, the 'Image Left No Button'. It functions the same and works identically, just flipped the column of the image and text . For explanation on how this works see the 'Image Left No Button' above.

Here is an example of the block for reference.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ac magna interdum interdum. Ut consequat sapien ut elit pharetra vestibulum. Sed sagittis accumsan dui ut tempor. Cras ullamcorper luctus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ac magna interdum interdum. Ut consequat sapien ut elit pharetra vestibulum. Sed sagittis accumsan dui ut tempor. Cras ullamcorper luctus

a chalk drawn sign reads, "Order Here," in front of a counter full of wine

Image With Acorn / Rounded Image / Image with Leaf

Image with Acorn

Image with Leaf

Rounded Image

These patterns are nothing more than the standard image block just with a style pre-selected. You can find our pre-made wvva styles by inserting the core image block and then picking a preset style on the right. You can have an acorn or leaf overlay, a rounded image, or no overlay, which is just the default image block.

Three Circular Icons

These 3 circular icons are a great way to show off different ideas, or aspects of an area. Here's an example. The icons should be swapped for similar rounded icons made by a designer. They are not set up to automatically change as this pattern is essentially 3 columns each with an image and a link below.

Choose your own adventure

The editor for these icons looks like this.