Toolkit for Block Theme (Gutenberg Blocks, Templates, Patterns, Google Fonts) – Twentig

Description

The easy way to create your own website.

The Twentig plugin helps you customize your block theme and build stunning pages — no coding or design skills needed.

With enhanced Gutenberg blocks, pre-designed templates, block patterns, additional global styles, and Google Fonts that you can self-host, you’ve got everything you need to build a beautiful website that looks great on any device.

Do more with Gutenberg blocks.

Twentig enhances the existing Gutenberg blocks — taking the WordPress block editor to a new level of design and creativity.

Powerful Gutenberg block features. Twentig provides alternative styles, additional block settings, and CSS classes. From column style to group shape divider to typography settings, you have the best tools to customize the Gutenberg blocks.

Block customization made easy. We’ve added the right amount of features to the Gutenberg core blocks. So you can easily customize your blocks to fit your needs with just a few clicks.

Build your website with ready-to-use templates.

Twentig brings hundreds of pre-designed block patterns and page templates — making it easier and faster than ever to create stunning pages.

Flexible block templates. Choose from a variety of versatile block patterns and page templates that you can mix and match to fit your project. Our block template library is designed to enable a wide range of uses and endless design possibilities.

Professional design. Our templates are responsive and give your pages a professional look right from the start.

Customize Twenty Twenty-Three or any block theme.

With its powerful features, Twentig helps you customize the Twenty Twenty-Three & Twenty Twenty-Two themes or any block theme built for full site editing.

Advanced global styles. Easily change the look and feel of your website with our additional global styles. Customize the fonts using the Google Fonts of your choice that you can host locally on your server. Change the website’s layout by editing the content width.

Enhanced theme blocks. Twentig extends the Gutenberg blocks that structure your entire site with advanced settings like navigation breakpoint, responsive logo width, menu icon, post excerpt length, featured image aspect ratio, and many more.

Additional block patterns. Twentig lets you quickly build your blog, header, and footer with pre-built block patterns.

Using the Twenty Twenty-One or Twenty Twenty theme?

If you prefer to use the Customizer instead of full site editing, Twentig offers advanced options to customize the Twenty Twenty-One and Twenty Twenty themes.

Advanced theme customization. From post grid to sidebar to sticky menu to header & footer layouts, our plugin provides endless ways to enhance your WordPress theme. Change the design of your website by customizing the fonts (Google Fonts), site layout, global styles, 404 page, and more.

Custom page templates. Control the look of your entire page with our page templates. Remove the page title, header & footer, or set a transparent header. Now you can use Gutenberg blocks to create a custom hero, landing page, coming soon page, and more.

Starter websites. Instead of starting from scratch, you can quickly import one of Twentig’s Starter Websites.

Twentig features list

Check out the screenshots to see how Twentig can transform your theme and the Gutenberg blocks.

ADDITIONAL THEME GLOBAL STYLES

Inside the Site Editor (Appearance > Editor), you can find additional style options in the Twentig Styles section:

  • Font options to let you select additional font families from the Google Fonts catalog
  • Option to host Google Fonts locally
  • Content width
  • Wide width
  • Predefined spacing styles for easy page building

ADDITIONAL SETTINGS FOR GUTENBERG THEME BLOCKS

  • Navigation: responsive breakpoint, menu icon, menu icon size, hover style, active style, button styles
  • Site Logo: image width on mobile
  • Query Loop: vertical alignment, block spacing, responsive column width
  • Post Title: typography options
  • Post Excerpt: max number of words
  • Post Featured Image: styles (rounded, shadow, frame), image aspect ratio, shapes, black & white filter
  • Post Tags and Post Categories: styles (outline, pill, hashtag, plain)
  • Post Author: link to author archive, inline layout, avatar shape
  • Pagination: page numbers styles (circle, square, plain), previous page and next page styles (pill, square)
  • Previous Post and Next Post: styles (stack, arrow)
  • Archive Title: option to hide the prefix

ADDITIONAL GUTENBERG BLOCK SETTINGS

  • Gutenberg core blocks: top margin and bottom margin, responsive visibility
  • Group: shadow, shape divider
  • Columns: responsive layout, text alignment
  • Column: styles (shadow, hard shadow, top border), stretched link
  • Media & Text: styles (shadow, overlap), responsive layout, reverse stack order, stretched link, full height
  • Cover: styles (shadow, inner border, rounded), aspect ratio, shapes, stretched link, hover effect
  • Heading: typography options, decoration
  • Paragraph: typography options
  • List: styles (dash, checkmark, arrow, border, no bullet, inline), spacing
  • Separator: styles (asterisks, dotted, dashed), width, height
  • Image: styles (rounded, shadow, frame, border), shapes, black & white filter
  • Gallery: stack variation, styles (rounded, frame), fixed width columns, image aspect ratio, vertical alignment, responsive layout, caption size, border, black & white filter
  • YouTube, Vimeo, SoundCloud, and Video blocks: style (frame)
  • Social Icons: hover effect
  • Quote and Pullquote: additional styles
  • Table: styles (border, inner border), vertical alignment
  • Tag Cloud: style (pill)
  • Search: style (underline)

GUTENBERG TEMPLATE LIBRARY

Hundreds of Gutenberg block patterns and pre-designed page templates grouped by following categories:

  • Columns
  • Text and Image
  • Text
  • Hero
  • Cover
  • Call to Action
  • List
  • Numbers, Stats
  • Gallery
  • Video, Audio
  • Contact
  • Team
  • Testimonials
  • Logos, Clients
  • Pricing
  • FAQ
  • Events, Schedule
  • Query (block themes)
  • Headers (block themes)
  • Footers (block themes)
  • Pages (Homepage, About, Services, Contact)
  • Single Page

Get more

Enjoying Twentig?

Screenshots

  • Twentig. The easy way to build a website that fits your project — no coding or design skills needed.
  • Customize your website with Google Fonts. Easily change your theme’s fonts with the Google Fonts of your choice.
  • Create your pages in no time. Use the Twentig template library to build beautiful pages.
  • Build with Gutenberg block patterns. Choose from hundreds of ready-to-use patterns that you can mix and match.
  • Customize the Gutenberg blocks. Transform the existing Gutenberg blocks with additional settings and styles.
  • Create a beautiful blog. Customize the design of your blog any way you like.
  • Customize your header. Change the layout and style, display social icons or a call-to-action button.
  • Customize your footer. Change the layout and style, edit the copyright, remove "Powered by WordPress", and more.

Installation

Install Twentig

To install and activate Twentig:

  1. Log in to your WordPress Dashboard.
  2. Click Plugins > Add New.
  3. Type Twentig in the search box.
    Alternatively, you can click on Upload Plugin to upload the plugin .zip file.
  4. Click on Install Now.

Once the installation has finished, click on Activate.

Install the default WordPress theme

To take full advantage of Twentig and the Gutenberg block editor, we recommend that you use the Twenty Twenty-Three theme or the Twenty Twenty-Two theme (or Twenty Twenty-One if you prefer to use a classic theme with the Customizer).

To install and activate the Twenty Twenty-Three theme:

  1. Log in to your WordPress Dashboard.
  2. Click Appearance > Themes.
  3. Search for the Twenty Twenty-Three theme and click on Activate.

After installation

Twentig features appear inside the Gutenberg block editor and the Site Editor (or inside the Customizer for classic themes).

  • Inside the Gutenberg block editor, you can find Twentig patterns by clicking the + icon.
  • Inside the Gutenberg block editor, you can find additional block settings in the block settings sidebar (Style, Twentig settings, and Advanced panels) — depending on the selected block.
  • For block themes such as Twenty Twenty-Three, inside the Site Editor (Appearance > Editor), you can find additional style options (Google Fonts, content width, wide width) in the Styles and Twentig Styles sections.
  • For the Twenty Twenty-One and Twenty-Twenty themes, inside the Theme Customizer (Appearance > Customize), you can locate our additional options in the Site Identity, Colors, and Twentig Options panels.

For more details, see our quickstart guide.

FAQ

What are the requirements for using Twentig?

We recommend that you use the latest version of WordPress to take full advantage of Twentig and the block editor.

Should I install the Gutenberg plugin?

No, using the Gutenberg plugin on a production site is not recommended because some features are experimental and unstable. Moreover, Twentig isn’t fully compatible with the Gutenberg plugin.

Is Twentig easy to use?

With Twentig, no coding or design skills are needed. You can customize the WordPress block themes and the Gutenberg blocks in a few clicks. Our responsive pre-designed block patterns and page templates make it even easier to build professional-looking pages.

Do you have a quickstart guide?

Yes, you can find it on our website.

Can I self-host my Google Fonts?

Yes! With Twentig, you can host your Google Fonts locally on your own server. Google Fonts are hosted locally by default for block themes.

How to insert a pre-designed block template?

To insert a block pattern or a page layout:

  1. Inside the Gutenberg block editor, place your cursor where you want to insert the pattern.
  2. Click the + icon to add a new block.
  3. Click on the Patterns tab.
  4. Browse the categories and click on the pattern you want to insert.

How to customize the Twenty Twenty-Three theme or any Gutenberg block theme with Twentig?

To customize your block theme, open the Site Editor (Appearance > Editor). From there, you can see the Styles icon in the top-right corner. In the Styles section, Twentig adds Google Fonts to the Typography panels.

Next to the Styles icon, you can find the [tw] icon. In the Twentig Styles section, you can change the Heading font family (with Google Fonts), the content width, and the wide width.

Twentig also provides additional settings to the Theme blocks and Design blocks that let you customize your website any way you like.

How to customize the Twenty Twenty-One & Twenty Twenty themes with Twentig?

To customize your theme, launch the Customizer (Appearance > Customize). Here you can easily make and preview changes to your website before publishing them. Find our additional options in the Site Identity, Colors, and Twentig Options panels.

To let you control the look of your entire page, Twentig provides 4 custom page templates. To change the template of a page:

  1. Open the page you want to edit.
  2. In the Settings sidebar, open the Page tab.
  3. In the Template panel, select the desired template.
  4. Update the page to apply the change.

Is Twentig RTL ready?

Yes! Twentig supports RTL (Right to Left) languages.

Reviews

Ebrel 3, 2023
After my old theme did not get any updates anymore, I was searching for a lightweight theme which is easy to use and beautiful as well. Thus, I stumbled over twentig. It's really easy to set up a page with all the block templates. And the complete theme templates make it even easier to set up a website. Great plugin. My site had never been faster since I use this plugin in combination with super cache and Asset cleanup. It sometimes takes less than a second to load. And looks nice as well. Thanks a lot!
C'hwevrer 27, 2023
Very simple to use, free and makes you look professional. What's not to like?
C'hwevrer 18, 2023
Awesome theme extension for Twenty Twenty-One, Twenty Twenty-Two and Twenty Twenty-Three! Coming with many helpful templates and styles. Super easy to customize. And the best: completely free! Huge thanks to the developers.
Read all 142 reviews

Contributors & Developers

“Toolkit for Block Theme (Gutenberg Blocks, Templates, Patterns, Google Fonts) – Twentig” is open source software. The following people have contributed to this plugin.

Contributors

“Toolkit for Block Theme (Gutenberg Blocks, Templates, Patterns, Google Fonts) – Twentig” has been translated into 5 locales. Thank you to the translators for their contributions.

Translate “Toolkit for Block Theme (Gutenberg Blocks, Templates, Patterns, Google Fonts) – Twentig” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.6.1

Release date: May 18, 2023

  • Code Quality: Updates the WP_HTML_Tag_Processor code for parity with Core in WP 6.2.1.
  • Enhancement: Updates the Google Fonts .json file.

1.6

Release date: April 3, 2023

  • New: Organizes Twentig block controls within the new styles and settings tabs.
  • New: Adds a setting to remove links from the Post Terms block.
  • New: Adds a setting to the Group block to make it entirely clickable if it contains a link.
  • New: Adds an option to disable Openverse (WordPress dashboard > Twentig > Settings).
  • Code Quality: Uses the new WP_HTML_Tag_Processor to adjust the HTML block markups.
  • Code Quality: Renames patterns categories and updates patterns to make them compatible with WordPress 6.2.
  • Code Quality: Removes outdated welcome guide.

1.5.5

Release date: February 23, 2023

  • New: Adds rounded and square styles to Social Icons.
  • Fix: Adjusts CSS of the Media & Text overlap style.
  • Fix: Adjusts CSS of the Post Featured Image styles for compatibility with the overlay setting.
  • Fix: Updates the markup of Gutenberg block patterns that use the List block.
  • Code Quality: Removes aspect ratio support for old browsers.
  • Code Quality: Removes border from the hard shadow style to only use shadow.
  • Enhancement: Moves vertical alignment controls to the block toolbar for Gallery and Query Loop blocks.

1.5.4

Release date: January 9, 2023

  • Enhancement: Updates the Google Fonts .json file.
  • Fix: Adds missing translations inside patterns.

1.5.3

Release date: November 24, 2022

  • Enhancement: Updates the Google Fonts .json file.
  • Fix: Adjusts CSS of the outline buttons for Twenty Twenty-One and Twenty Twenty to fix inconsistency caused by WordPress 6.1.
  • Fix: Removes !important declaration on column block that was overriding some theme styling.
  • Fix: For Twenty Twenty-One, prevents PHP error when the uploaded logo has no dimensions.

1.5.2

Release date: November 3, 2022

  • Fix: Fixes PHP errors for child themes and Cover block.

1.5.1

Release date: November 2, 2022

  • Fix: Fixes PHP errors inside the back end.

1.5

Release date: November 1, 2022

  • Enhancement: Updates the Google Fonts .json file.
  • Enhancement: Adds responsive columns setting to the Gallery block. Deprecates the “Stack on mobile” setting.
  • Enhancement: Uses range slider controls for the block spacing for the Query Loop block.
  • New: Adds inline layout class to the Group block.
  • New: Adds text gradient class to the Heading, Paragraph, Query Title and Post Title blocks.
  • New: Adds margin settings to the List Item block.
  • Compatibility: Deprecates the Twentig vertical spacing in favor of the new block spacing setting for the Columns block.
  • Compatibility: Makes the block patterns compatible with Twenty Twenty-Three.
  • Compatibility: Makes the Navigation Link styles compatible with the global styles of the Buttons elements.
  • Compatibility: Makes the table styles compatible with the new border settings.
  • Compatibility: Deprecates Twentig content and wide width settings in favor of the new core global styles.

1.4.8

Release date: September 19, 2022

  • Enhancement: Updates the Google Fonts .json file.
  • Fix: For Twenty Twenty-One and Twenty Twenty, host the fonts locally only when Google Fonts is used (props @pmmueller).

1.4.7

Release date: August 2, 2022

For Gutenberg blocks:

  • New: Adds responsive order classes to the Column block.
  • New: Adds responsive text alignment classes to the Previous post and Next post blocks.

For block themes:

  • Enhancement: Updates the Google Fonts .json file.
  • Fix: Adjusts CSS for the gallery caption.

1.4.6

Release date: July 21, 2022

For block themes:

  • New: Adds font options to let you select additional font families from the Google Fonts catalog (Site Editor > Twentig Styles > Typography > Font 1, Font 2)
  • New: Adds option to host Google Fonts locally (Site Editor > Twentig Styles > Typography > Font Hosting). Please note that Google Fonts are now hosted locally by default.
  • New: Adds font family support to the Heading block.
  • New: Adds styles (asterisks, dotted, dashed), width and height settings to the Separator block.
  • New: Adds styles (stack, arrow) to the Previous Post and Next Post blocks.
  • New: Adds styles (circle, square, plain) to the pagination’s Page Numbers block.
  • New: Adds styles (pill, square) to the pagination’s Previous Page and Next Page blocks.
  • New: Adds styles (shadow, hard shadow, top border) and Stretch link setting to the Column block. Deprecates Columns style, Stretch first block and Stretch link settings for the Columns block.

For Gutenberg blocks:

  • New: Adds new shapes to the Image block.
  • New: Adds Shape setting to the Cover and Post Featured Image blocks.
  • New: Adds border support to the Column block.

For Twenty Twenty-One and Twenty Twenty themes:

  • New: Adds option to host Google Fonts locally (Customizer > Twentig Options > Fonts > Font Hosting).
  • Enhancement: Updates the Google Fonts .json file.

1.4.5

Release date: June 20, 2022

For block themes:

  • New: Adds block spacing, responsive column width, and vertical alignment settings to the Query Loop block.
  • New: Adds button styles to the Navigation Link block.
  • New: Adds hover and active style settings to the Navigation block.
  • Fix: Make Twentig global styles compatible with style variations.

For Gutenberg Blocks:

  • New: Adds “Highlight padding” CSS class to the Paragraph, Heading, and List blocks.

For Twenty Twenty-One:

  • Fix: Updates malformed CSS.

1.4.4

Release date: June 6, 2022

For Gutenberg Blocks:

  • New: Adds responsive width setting for the Logo block.
  • New: Adds backdrop blur filter CSS class to the Group block.
  • New: Adds style (plain) to the Post Categories and Post Tags blocks.
  • New: Adds responsive justification CSS classes to the Buttons and Social Icons blocks.

For Twenty Twenty-One & Twenty Twenty themes:

  • Fix: Updates Quote and Pullquote CSS to make them compatible with typography options.
  • Code Quality: Merges Twenty Twenty-One and Twenty Twenty patterns files.
  • Code Quality: Uses CSS logical properties and removes RTL files.
  • Code Quality: Moves the classic theme’s files to a separate folder.

1.4.3

Release date: May 24, 2022

For block themes:

  • New: Adds vertical block spacing setting to the Columns block.
  • New: Adds Roboto Flex as a font-family option.
  • Compatibility: Updates block patterns for WordPress 6.0.

For Twenty Twenty-One and Twenty Twenty themes:

  • Compatibility: Adjusts CSS to make columns layout compatible with WordPress 6.0.

1.4.2

Release date: May 19, 2022

For the Gutenberg block editor:

  • New: Adds aspect ratio setting to the Cover block.
  • New: Adds new hover effect options to the Cover block.
  • New: Adds new styles (rounded and rounded corners) to the Cover block.
  • New: Adds vertical alignment setting to the Gallery block.
  • New: Adds “Caption on hover” CSS class to the Gallery block.
  • New: Adds “+” menu icon option to the Navigation block.
  • New: Adds letter spacing CSS class to the Navigation block.
  • New: Adds new styles (rounded, subtle border) and “Black & white” CSS class to the Featured Image block.
  • New: Adds “Text shadow” CSS class to the Paragraph, Heading, and Post Title blocks.
  • New: Adds “Link no underline” CSS class to the Post Date, Post Terms, and Post Author blocks.
  • Compatibility: Adjusts CSS to make Gallery and Cover settings compatible with WordPress 6.0.

For block themes:

  • New: Adds style (underline) to the Search block.
  • New: Adds styles (outline, pill, hashtag) to the Post Categories and Post Tags blocks.
  • New: Adds style (pill) to the Tag Cloud block.
  • Compatibility: Deprecates the Twentig gutter setting in favor of the new block spacing setting for Columns, Gallery, and Navigation blocks (for WordPress 6.0).
  • Compatibility: Makes Twentig Styles panel compatible with WordPress 6.0 and 5.9.

For Twenty Twenty-Two theme:

  • Compatibility: Adjusts CSS for full-width blocks inside the editor for WordPress 6.0.

For Twenty Twenty-One theme:

  • Enhancement: Updates the Google Fonts .json file.

For Twenty Twenty theme:

  • Enhancement: Updates the curated Google Fonts list.

1.4.1

Release date: March 22, 2022

For the Gutenberg block editor:

  • Fix: Unloads editor-related assets in the block-based widget editor to prevent error notice.
  • Fix: Adjusts spacing for the pattern preview.

For Twenty Twenty-Two theme:

  • Fix: Adds font preset for Extra Extra Large size.

For Twenty Twenty theme:

  • Fix: Restores the content width inside the Gutenberg block editor.
  • Fix: Restores layout and color for the privacy page (fixes the latest theme’s update).

1.4

Release date: March 11, 2022

Twentig 1.4 brings powerful features to supercharge Twenty Twenty-Two, the new default WordPress theme, and all block themes. Build a beautiful website with advanced style options, enhanced Gutenberg blocks, block patterns, and more.

This release adds support for the Twenty Twenty-Two theme and all block themes:

  • New: Adds style options (Google Fonts for Font family settings, Heading font family, Content width, Wide width).
  • New: Adds settings to Theme blocks (Navigation, Post Excerpt, Post Featured Image, Archive Title, Post Date, Post Author).
  • New: Adds Headers, Footers, and Query patterns.
  • New: Makes Twentig patterns compatible with block themes.

For the Gutenberg block editor:

  • New: Adds Shape setting to the Image block.
  • New: Adds Hard shadow style for Group, Columns, Media & Text, Image, and Cover blocks.
  • New: Adds Responsive visibility settings to Gutenberg blocks.
  • New: Moves Twentig page layouts inside the block inserter.

For Twenty Twenty-One theme:

  • Fix: Restores the style inside the pattern preview.
  • Enhancement: Update block patterns to match the latest versions of core blocks.

For Twenty Twenty theme:

  • Fix: Restores the style inside the pattern preview.
  • Enhancement: Update block patterns to match the latest versions of core blocks.
  • Fix: Restores the outline button border.

See changelog for all versions.