Creating a block from a View
by Chaz Chumley, Matt Glaman, Richard Jones, Nick Abbott
Drupal 8: Enterprise Web Development
- Drupal 8: Enterprise Web Development
- Table of Contents
- Drupal 8: Enterprise Web Development
- Credits
- Preface
- 1. Module 1
- 1. Introduction
- 2. Installation
- 3. Basic Concepts
- 4. Getting Started with the UI
- 5. Basic Content
- 6. Structure
- 7. Advanced Content
- 8. Configuration
- 9. Users and Access Control
- 10. Optional Features
- 11. Reports
- 12. Extending Drupal
- 13. Theming Drupal
- 14. Getting Support
- 2. Module 2
- 1. Up and Running with Drupal 8
- 2. The Content Authoring Experience
- 3. Displaying Content through Views
- 4. Extending Drupal
- 5. Frontend for the Win
- 6. Creating Forms with the Form API
- 7. Plug and Play with Plugins
- 8. Multilingual and Internationalization
- 9. Configuration Management – Deploying in Drupal 8
- 10. The Entity API
- 11. Off the Drupalicon Island
- 12. Web Services
- 13. The Drupal CLI
- 3. Module 3
- 1. Setting Up Our Development Environment
- 2. Theme Administration
- 3. Dissecting a Theme
- Setting up a local development environment
- Default themes versus custom themes
- Folder structure and naming conventions
- Managing configuration in Drupal 8
- Reviewing the new info.yml file
- The role of templates in Drupal
- Creating our first basic theme
- Introducing Twig
- Template variables
- The role of the theme file in Drupal
- Summary
- 4. Getting Started – Creating Themes
- 5. Prepping Our Project
- 6. Theming Our Homepage
- Creating our HTML wrapper
- Creating our homepage
- Implementing our Header Top region
- Implementing our Header region
- Adding a logo
- Enabling Site branding
- Printing our Header region
- Creating Block templates
- Implementing our search form block
- Placing our search form block
- Creating a search form block template
- Adding custom JavaScript
- Creating an input element template
- Working with menus
- Creating a menu template
- Creating System Menu block template
- Creating a sticky header
- Implementing our Headline Region
- Implementing our Before Content region
- Implementing the footer
- Summary
- 7. Theming Our Interior Page
- 8. Theming Our Blog Listing Page
- Reviewing the Blog Listing mockup
- Creating our blog listing
- Creating a Post Listing view
- Managing our Post Listing block
- Implementing our Node template
- Adding CSS classes to Twig
- Working with content variables
- Using the without filter
- Creating our post image slider
- Working with field templates
- Adding the Owl Carousel library
- Using Twig filters for dates
- Printing title and teaser
- Creating our post metadata
- Field templates and taxonomy
- Handling comments in Drupal 8
- Creating a theme file
- Creating a Categories block
- Managing our Categories block
- Implementing responsive sidebars
- Theming a Block template
- Drupal Views and Twig templates
- Managing popular versus recent content
- Adding the About Us block
- Summary
- 9. Theming Our Blog Detail Page
- Reviewing the Blog detail mockup
- Previewing our Blog detail page
- Creating a Post Full template
- Working with comments
- Implementing social sharing capabilities
- Summary
- 10. Theming Our Contact Page
- 11. Theming Our Search Results
- 12. Tips, Tricks, and Where to Go from Here
- A. Biblography
- Index
Previous recipes have shown how to create and manipulate a page created by a view. Views provides different display types that can be created, such as a block. In this recipe we will create a block powered by Views. The Views block will list all Tag taxonomy terms that have been added to the Article content type.
This recipe assumes you have installed the standard installation profile and have the default node content types available for use.
- Visit Structure and then Views. This will bring you to the administrative overview of all the views that have been created.
- Click on Add new view to begin creating a new view.
- The first step is to provide the View name of
Tags, which will serve as the administrative and (by default) displayed title. - Next, we modify the View settings. We want to display Taxonomy terms of the type Tags. This will make the view default to only displaying taxonomy terms created under the Tags vocabulary
- Check the Create a block checkbox.
- Choose the HTML List option from the Display format choices. Leave the row style as Fields.
- We want to display all of the available tags. To change this, click the current pager style link. Pick the Display all items radio and click Apply (all displays). On the next model, click Save to keep the offset at
0. - Next we will sort the view by tag name instead of order of creation. Click Add on the Sort criteria section. Add Taxonomy term: Name and click Apply (all displays) to use the default sort by ascending.
- Press Save to save the view.
- Visit Structure and Block layout to place the block on your Drupal site. Press Place block for the Sidebar region in the Bartik theme.
- Filter the list by typing your view's name. Press Place block to add your view's block to the block layout.
- Finally click on block to commit your changes!
In the Drupal 8 plugin system there is a concept called
Derivatives. Plugins are small pieces of swappable functionality within Drupal 8. Plugins and plugin development are covered in Chapter 7, Plug and Play with Plugins. A derivative allows a module to present multiple variations of a plugin dynamically. In the case of Views, it allows the module to provide variations of a ViewsBlock plugin for each view that has a block display. Views implements the DrupalviewsPluginBlockViewsBlockViewsBlock class, providing the base for the dynamic availability of these blocks. Each derived block is an instance of this class.
When Drupal initiates the block, Views passes the proper configuration required. The view is then executed and the display is rendered whenever the block is displayed.
We will explore some of the other ways in which Views interacts with blocks.
Pages and feeds have the ability to provide blocks, however not for the actual content displayed. If your view utilizes exposed filters you have the option to place the exposed form in a block. With this option enabled you may place the block anywhere on the page, even pages not for your view!
To enable the exposed filters as a block, you must first expand the Advanced section on the right side of the Views edit form. Click on the Exposed form in block option from the Advanced section. In the options modal that opens, select the Yes radio button and click Apply. You then have the ability to place the block from the Block layout form.
An example for using an exposed form in a block is for a search result view. You would add an exposed filter for keywords that control the search results. With the exposed filters in a block you can easily place it in your site's header. When an exposed filters block is submitted, it will direct users to your view's display.
- Chapter 7, Plug and Play with Plugins, to learn more about derivatives
-
No Comment