We have updated the Flat Blocks WordPress theme to version 1.8 with even more features from WordPress version 6.6 and 6.7, including exposing ALL custom block styles in the Styles Editor. So you can now make changes to colors, borders, etc.
Here is a summary of the most important updates to the Flat Blocks WordPress theme from versions 1.8 and 1.7. All of these are inherited by the Flat Blocks Classic child theme as well.
- ALL custom block styles are now visible in the Styles Editor! This requires WordPress v6.6+. The attributes that you can change in the Styles Editor will override the default ones in the theme. For example if you want a thicker border on groups or a different colored background on comments, post meta, and sidebars.
- Added 4 new button styles: Button Alt, Button Alt 2, Outline Alt and Outline Alt 2. By default, the Alt ones are rounded and the Alt 2 are rectangular, but you can change them yourself in the Styles Editor.
- Added Next and Previous Post links to all Post Templates so user can easily page through articles on your site.
- Added new “Colored Footer” and “Colored Footer w/Links” template parts. The former uses the Secondary colors and the latter uses the Primary colors with light text and links are underlined. That one is great to use when you want a colored footer but the link color doesn’t look good with it.
- Added new gradient backgrounds: Primary to Primary Alt, Secondary to Secondary Alt, Tertiary to Tertiary Alt.
- Extended Rounded Corners, Rounded Border, and Thick Rounded Border to Cover, Media & Text, Code, Columns, and individual Column blocks.
- Changed Fixed Header group style over to the new Position: Sticky. CSS remains for backwards-compatibility for a while, but the ability to select it in the Editor has been removed. Use Position: Sticky on the group instead.
- Added Link No Underline, Link Underline, and Link Underline Hover styles to the List block so these can be controlled at the list level rather than the individual list item.
- Updated social media icons in the various footer template parts to switch over to X instead of Twitter.
- Added clear labels to all Header, Footer, Sidebar, Post Meta, and Main content groups to differentiate them from other groups in the Templates while viewing in the Editor.
- Several enhancements made to provide sensible defaults for text, link, and hover colors as well as whether links are underlined or not. This makes it easy to change just the background color on groups or columns, etc. and not have to always specify the other colors.
- Updates for much better support of right-to-left languages! This includes updating the CSS for lists and post meta icons as well as updating the various footer template parts that used to have right-alignment on some of the text items. Please do let us know if you run into any issues and/or would like to translate the theme into other languages.
- Numerous additional bug fixes and enhancements to improve the look and usability of the theme.
Flat Blocks Demo, Download, & Support
More Information
Flat Blocks Classic Theme
You can download the Flat Blocks Classic child theme from WordPress.org.
Release Notes
Here is the full set of release notes for versions 1.8 through 1.6.4, which is the last update posted in this website:
= 1.8 =
November 20, 2024
Version Summary: Now ALL custom block styles are visible in the Styles Editor! Also adjusted site logo size and paddings to line up mobile nav open and close buttons. Added more descriptive labels for the Editor on various templates.
- Now ALL custom block styles are visible in the Styles Editor! This requires WordPress v6.6+. Note there is still CSS associated with many of these styles, but the attributes that you can change in the Styles Editor will override the default ones in the theme. For example if you want a thicker border on groups or a different colored background on comments, post meta, and sidebars.
- Adjusted sizes of the site logo on various header template parts to all be 64px (previously 50px, 64px, or 80px). Adjusted padding on Colored Header. This allowed us to line up the mobile Nav menu open and close buttons.
- Removed Admin Menu links to the old Widgets and Menus customizer since these should not be used in a block-based theme.
- Reduced vertical spacing when Nav menu wraps lines.
- Set font-size to small for and
tags.
- Relabeled Site Header, Site Footer, and Site Query to Header Template, Footer Template, and Query Template in the Styles Editor. This was done just to better indicate that replacing it will only affect the Template currently being edited. To replace the Header or Footer site-wide across all templates, replace the one below it that has a specific name, such as Header Fixed.
- Added more labels to special groups in the various page Templates, such as page title groups and query pagination. This is nice for the outline view in the Editor.
- Enhanced CSS for Dashicons icons.
- Separated out Image Gallery styles from the Image styles in source SCSS files.
= 1.7.1 =
November 17, 2024
- Fix for missing “Border” custom style on Images in the Editor. It was only showing up on Image Galleries.
- Set Excerpt length to 30 words when displayed in the Page title. The Excerpt is still the default 55 words on blog pages.
- Enhanced CSS for image captions within Image Galleries.
- Enhanced CSS for multi-level drop-down nav menus.
- Enhanced CSS for Dashicons icons.
- Removed No Read More custom style for Post Excerpt since its no longer needed. Read More now has to be manually added to the block by the user if desired.
= 1.7 =
November 13, 2024
- Updated “Tested up to” with WordPress v6.7 and “Requires at least” to v6.5.
- Enhanced CSS to map the new WordPress v6.7 TwentyTwentyFive colors to this theme’s colors.
- Updates for much better support of right-to-left languages! This includes updating the CSS for lists and post meta icons as well as updating the various footer template parts that used to have right-alignment on some of the text items. Please do let us know if you run into any issues and/or would like to translate the theme into other languages.
- Turned off the ability to edit the normal and wide content width on individual blocks because it will break the vertical alignment of the theme. You can still edit the site-wide normal and wide widths though.
- Updated the Post Meta and Post Title template parts to display the Post Author Name. Also default an icon next to it and add a custom block style to remove it, if desired.
- Updated the Author page template to use a rounded border on the author information so that it is visually set apart from the author’s post below it.
- Updated the remaining social media icons over to X instead of Twitter in the sidebar and various template parts and patterns.
- Updated the default social media links to point to the WordPress page, such as on Facebook and X.
- Enhance CSS for header navigation with highlight color on link hover and currently active page link to also work with the Page List block. That is what is defaulted on new WordPress sites and in the WordPress.org theme preview.
- Set Site Logo in the various Header template parts to reduce the tendency to shrink when there is a very long site title or navigation menu (set flex-shrink to 0).
- Enhanced CSS for the Dashicons used for post icons. Replaced the Dashicon for Lists with Checkmarks with simpler Unicode character.
- Moved CSS for Images, Headings, and Columns from flat-blocks.css to block-styles.css. This reduces the size of flat-blocks.css which is the first to load. This is also in preparation for possible future performance enhancements.
= 1.6.9 =
November 9, 2024
- Fix issue with Theme Styles that set dotted underline on links that was also resetting the color palette to the default one. This required changing –wp–custom–color–link–style to –wp–custom–link–style in theme.json.
= 1.6.8 =
November 5, 2024
- Remove CSS for Editor background and text color since it now defaults from the settings in theme.json.
- Fix WordPress bug where Separator preview doesn’t display in the Editor.
- Remove old commented out code in block-patterns.php, block-styles.php, and wp-compatibility.php.
= 1.6.7 =
October 29, 2024
- Added new gradient backgrounds: Primary to Primary Alt, Secondary to Secondary Alt, Tertiary to Tertiary Alt.
- Updated social media icons in the various footer template parts to switch over to X instead of Twitter.
- Updated social media icons in the Social Media block patterns to be white instead of off-white for greater contrast with the background color.
- On blocks with gradient background, default the text color and inherit the link color from the text color.
- Enhanced CSS for Separator block to fix a bug in WordPress where user settings for separator color were overriden by the default separator color (in theme.json).
- For WordPress v6.6 and higher, added our Thick and Wide Thick Separator block styles to the Editor so you can change the separator color if you’d like.
- On header nav menu with colored background, lighten the link text on hover.
- Updated striped table and calendar block heading background and text colors to work better with dark site backgrounds.
- Moved the padding on colored groups and columns to CSS (flat-blocks.css) instead of in “additional CSS” on those blocks in theme.json. This keeps the “additional CSS” clean for users to add their own without messing up the defaults.
= 1.6.6 =
October 12, 2024
Version Summary: Updated logic for default link colors and link underlines on colored backgrounds and in menus. Added new “Colored Footer” and “Colored Footer w/Links” template parts. The former uses the Secondary colors and the latter uses the Primary colors with light text and links are underlined. That one is great to use when you want a colored footer but the link color doesn’t look good with it. Updated dark background theme styles, but removed the Auto Dark Mode as WordPress isn’t handling “Additional CSS” very well in theme styles.
- Updated all the color palettes to better handle link colors and whether to underline or not. Set a teal (blue-green) color on Midnight Blue and Dark Midnight Blue backgrounds when using those color palettes (the main one still uses green links).
- Added new custom variables for hover opacity and hover style for links and hover opacity for buttons. –wp–custom–color–link–hover-opacity, –wp–custom–color–link–hover-style, and –wp–custom–color–button–hover-opacity.
- Changed separator (hr) color to use the highlight color when used on a colored background (group, columns, etc.)
- Updated the new default link underline logic to set non-underlined links to underline on hover.
- Set input fields to inherit the body font (lato by default) and in dark themes to use a dark background.
- Removed font color from Rounded, Rounded Border, and Thick Rounded Border styles so they default to the overall Contrast color (#555555 by default). This is useful in case you want to change the background color to a dark color. Just be sure to set a light font color if you do.
- Added No Padding style to the Media & Text block.
- Removed the theme reference in the “Header with Tagline” template part so it works with child themes.
- Added padding to colored groups which are aligned wide in the Site Editor to better match the front-end (align full already did this).
- Removed Fixed Header custom group style and implemented the WordPress position:sticky feature instead. CSS and javascript for backwards-compatibility remains.
- Removed default top and bottom padding on Group blocks, but updated CSS for backward-compatibility.
- Now including WordPress development configuration files: webpack.config.js, package.json, and package-lock.json. If you have node.js and the WordPress development scripts installed, you can run npm start or npm run build in the flat-blocks directory.
= 1.6.5 =
September 6, 2024
Version Summary: Several enhancements made to provide sensible defaults for text, link, and hover colors as well as wether links are underlined or not. This makes it easy to change just the background color on groups or columns, etc. and not have to always specify the other colors.
Also added Next and Previous Post links so user can easily page through articles on your site.
Here are some more updates:
- Added About 3 Navs Footer Template Part and set the About 3 Navs w/Site Info to use it.
- Adjust CSS for horizontal padding in the Editor to better deal with full-width and non-full-width blocks. Set Header w/Tagline Template Part to use it too.
- Added names to all Header, Footer, Sidebar, Post Meta, and Main content groups to differentiate them from other groups in the Templates while viewing in the Editor.
- Added new custom variables for button colors: –wp–custom–color–button-background and –wp–custom–color–button–text. Replaced –wp–custom–border–color with –wp–custom–color–border to be consistent with the new color variables.
- Centered the “No results” on queries and locked the block so it can’t accidentally be removed.
= 1.6.4 =
August 22, 2024
Version Summary: Added 4 new button styles. Button Alt and Button Outline Alt have no border-radius so they are rectangular. Button Alt 2 and Outline Alt 2 are pill shaped. Extended Rounded Corners, Rounded Border, and Thick Rounded Border to Cover, Media & Text, Code, Columns, and individual Column blocks. With WordPress v6.6, all of these new styles can be edited in the Styles Editor.
Here are more details on the updates:
- Added 4 new button styles, Button Alt, Button Alt 2, Outline Alt and Outline Alt 2. By default, the Alt ones are rounded and the Alt 2 are rectangular, but you can change them yourself in the Styles Editor.
- Extended Rounded Corners, Rounded Border, and Thick Rounded Border to Cover, Media & Text, Code, Columns, and individual Column blocks. These can be edited in the Styles Editor.
- You can now also edit the Border and Thick Border styles for groups, columns, etc.
- Changed Fixed Header group style over to the new Position: Sticky. CSS remains for backwards-compatibility for a while, but the ability to select it in the Editor has been removed. Use Position: Sticky on the group instead.
- Added Link No Underline, Link Underline, and Link Underline Hover styles to the List block so these can be controlled at the list level rather than the individual list item.
- Renamed custom-styles.css to block-styles.css to better reflect the fact that it has both standard and custom block styles in it.
Comments