Block editor
The Shiro theme and Wikimedia Foundation website have been built to utilize the WordPress Block Editor (also known as Gutenberg).
There are numerous resources available to support usage of the WordPress Block Editor, including:
- Official WordPress.com guide
- WordPress.com Developer's Block Editor Handbook
- CodeinWP's guide
- Gutenberg Hub usersite
- WPBeginner's guide
Below are the blocks already available within the Shiro theme. To request an additional block, please contact the team.
Individual blocks available for use as solo or combined design elements.
Individual blocks created specifically for use by the Wikimedia Foundation organization websites initiative. Locatable under the "Wikimedia" section of the "Blocks" tab.
Use the "Accordion" effect to hide/display blocks of text using Headers.
Horizontal banner design with header, text, right-justified image (with option to select an image filter color), and button.
Available in these design styles:
- Light
- Gray
- Dark
- Blue - Faded
- Blue - Vibrant
- Red - Faded
- Red - Vibrant
- Yellow - Faded
- Yellow - Vibrant
- Donate
Standard display of list of entries to News/Blog section of website without any column or related formatting that appears in the "Blog list" pattern.
Vertical banner displaying image and text with hover card design and more information link.
Hide/display blocks of text using "Read more" / "Read less" customizable links.
Block with setup for displaying basic contact information.
Header with rotating secondary heading that can rotate matching translations (which must be entered for each usage).
External header link with description text.
Large horizontally scrolling and clickable header image used on homepage. Use of clickable link and scrolling animation are optional and can be disabled.
Images should be 14112x1512 pixels in dimension and total file size should be under 1MB. Site supports SVG for easier use of vector images.
Heading color can be set to other colors in the Wikimedia Foundation Design Guide color palette.
Inline/in-page horizontal display of links to that page in other available languages.
Header with page title, teaser description, introduction text, and image for use on landing pages.
Available in these design styles:
- Light
- Gray
- Dark
- Blue - Faded
- Blue - Vibrant
- Red - Faded
- Red - Vibrant
- Yellow - Faded
- Yellow - Vibrant
- Donate
Left column based table of contents with customizable links.
Subscription form compatible with Wikimedia Foundation's Mailchimp account.
Display of 3 profiles selected randomly from list of profiles selected for use by that block instance.
Display of 1 profile selected for use by that block instance.
Header with page title, kicker, and image for use on report landing pages. Is formatted to use left column table of contents block.
Available in these design styles:
- Light
- Gray
- Dark
- Blue - Faded
- Blue - Vibrant
- Red - Faded
- Red - Vibrant
- Yellow - Faded
- Yellow - Vibrant
- Donate
Twitter and Facebook share icons. Can disable either service. Link setup based on page block is placed within.
![Screenshot 2023-02-02 at 2 13 35 PM](https://user-images.githubusercontent.com/674625/216461236-a9a834f9-2c57-4041-94bf-3d1f44dd554b.png">
Horizontal banner design with header, text, left-justified image (with option to select an image filter color), and button.
Available in these design styles:
- Light
- Gray
- Dark
- Blue - Faded
- Blue - Vibrant
- Red - Faded
- Red - Vibrant
- Yellow - Faded
- Yellow - Vibrant
- Donate
Columns (2) and rows with overlayed banners with image, text, and link.
Left column based table of contents with links automatically generated from page's headers.
Link with Twitter icon that can be setup to Tweet text setup within block's configuration tab.
Block designed to display art, artist bio, links to artist social media profiles and interview with artist.
Alternative method of displaying facts and page header. Designed for use in artist-based campaigns.
Horizontal banner with header and text against a Blue - Faded design.
Horizontal banner with center-justified header and text against no background.
Found under the "Widgets" section and used to support responsive display of Vega Lite graphs. See the Vega Lite documentation site for more specifics on coding this block.
Found under the "Widgets" section and used to support standard display of Vega Lite graphs. See the Vega Lite documentation site for more specifics on coding this block.
While standard blocks can be disabled (and will be if not compatible or configured yet to work with Shiro's design), most have been left enabled including:
Locatable under the "Text" section of the "Blocks" tab.
Should be utilized for media files rather than embed blocks. Locatable under the "Media" section of the "Blocks" tab.
Locatable under the "Design" section of the "Blocks" tab.
Blocks generally made using multiple individual blocks and available for use across the site. Note that when you change a Reusable block and save as that Reusable block, it will update everywhere that block is in use.
Duplicate of "Tweet this columns" pattern which could be used to display same set of "Tweet this" blocks with same content in multiple places.
Information box designed to display urgent/important information on top of homepage.
Blocks used for Communications/Connect area of each page - setup to update across all pages where this reusable block is displayed.
Blocks used for Support/Donate area of each page - setup to update across all pages where this reusable block is displayed.
Groups of individual blocks and reusable blocks intended to help ease usage of commonly used designs or design elements.
Locatable when selecting "Wikimedia" from dropdown menu under "Patterns" tab.
Columns with multiple (4) number based headers to displays multiple facts in a responsive row with text setup.
Columns with multiple (3) "Tweet this" blocks setup.
Columns setup with "External link" blocks for use in footer of pages.
Columns setup with multiple (3) "Card" blocks displaying image and text with hover card design and more information link.
"Blog list" block formatted with a table design to match existing page designs.
Duplicate of "Communication Module" reusable block which is not connected to the standard reusable block setup - meaning changes to it do not impact other uses of this design element.
Locatable when selecting "Wikimedia templates " from dropdown menu under "Patterns" tab.
Template for foot section of a standard page.
Template for default landing page design.
Template for setting up a page with automated left column navigation and standard footer section.
Template for report specific landing page with left column navigation and hero image header.
Template for setting up a page with automated left column navigation - generally for use on report pages.
