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.
WordPress’ block editor (also called Gutenberg interchangeably) has a few areas that are important and useful to familiarize yourself with while editing.
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.
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.
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.
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.
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.
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
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.
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.)
Signs of spring and summer are everywhere around the Willamette Valley: Temperatures are inching higher every day, farmers are picking their first crops of the growing season, and our world-famous wineries are expanding their outdoor seating for the coming months.
But the changing season also means the chance to paddle the 187-mile-long Willamette Water Trail, which covers the mainstem Willamette River, as well as the Coast Fork Willamette, Middle Fork Willamette, and the McKenzie rivers.
Begin your journey in Eugene, located at the southern end of the Willamette Valley just two hours south of Portland. You’ll find a collection of locally-owned shops, urban tasting rooms and restaurants. Cycle the extensive bike path system throughout the city, or head to nearby Fern Ridge Reservoir for a fun day of boating and swimming. Discover the many vineyards that line Territorial Highway, then cozy up for the night at a hotel or bed and breakfast. The next morning, begin your ride with serious carbo-loading at Off the Waffle, a local favorite featuring gourmet European-style waffles. Bike out to Armitage Park, where you head northward on the Willamette Valley Scenic Bikeway.
It’s time to take in the beautiful colors and crisp air Oregon is known for. One must-stop on a wine-lover’s fall list should be the South Willamette Valley’s Territorial Wine Trail.
An example of the block in the editor. For reference.
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
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.
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
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.
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.
These blocks are intended to only be used on posts, for consistency and to help visually distinguish a post vs. a page.
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.
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.
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.
This is exactly the same as the image with the left text block, just flipped.
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?
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.
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.
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.
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
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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
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.
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.
The editor for these icons looks like this.
Your adventure begins with the official Willamette Valley Travel Guide. Request your complimentary printed guide or download a digital guide today.
Your adventure begins with the official Willamette Valley Travel Guide. Request your complimentary printed guide or download a digital guide today.
