Flat Blocks WordPress Theme v1.6 Updates

We have updated the Flat Blocks WordPress theme to version 1.6 and the Flat Blocks Classic child theme to version 1.1. Both themes now support WordPress version 6.6.

Here is a summary of the most important updates to the Flat Blocks theme from version 1.5 and 1.6. All of these are inherited by the Flat Blocks Class child theme as well.

• With WordPress v6.6, Global Theme Styles can now mix and match color palettes with different font pairings. You can now apply your favorite font pairing to any of the available color schemes.
• Changed Background and Foreground colors to Base and Contrast respectively to match the default WordPress Twenty Twenty Four theme.
• Font and link colors now default to light color on dark colored backgrounds.
• Enabled image “lightbox” (click image to display full-width in popup window) by default (in theme.json). This can be turned off, if desired, in the Global Styles settings.
• Added more cover images and Block Patterns for them: book, building, city night, guitars, notebooks, and an antique typewriter.
• Changed preset box shadows for buttons to “tone them down” from the WordPress defaults to better fit with the theme style.
• Added Custom Block Styles for Links: underline link, don’t underline link, and underline link on hover.
• Numerous additional bug fixes and enhancements to improve the look and usability of the theme.

Flat Blocks Child Theme

You can download the Flat Blocks Classic child theme from WordPress.org.

Release Notes

Here is the full set of release notes since version 1.4:

= 1.6 =
July 23, 2024

• Breaking change: Changed Background and Foreground colors to Base and Contrast respectively to match the default WordPress TwentyTwentyFour theme. CSS was added for backward-compatibility though (in /src/scss/base/_color-compat.scss).
• Breaking change: Default outline buttons to Contrast (foreground) color. Individual outline button color can be easily changed.
• Updates for WordPress v6.6:
  • Updated theme.json to version 3 which allows the new WordPress v6.6 features, such as Block Style Variations. See https://make.wordpress.org/core/2024/06/19/theme-json-version-3/
  • Typography styles are now available to apply to any of the other colored global theme styles. This lets you mix and match colors and typography. Note these styles were moved into a /styles/typography directory to differentiate them from the ones in the main folder.
  • Fix font size issue and spacing size issue introduced with v6.6. Now setting the new defaultFontSizes and defaultSpacingSizes to false in theme.json, so that theme settings aren’t overwritten. Also note had to add !important to font sizes normal and huge because WordPress was still outputting them.
  • Fix global style preview button color for the way WordPress v6.6 works. i.e. So the little button-colored dots reflect the button color for each style.
• CSS fixes and enhancements:
  • Fix CSS which was overriding the ability to set the color of outline style buttons in the Global Styles Editor.
  • Fix wide and thick wide separators that weren’t displaying due to change in WordPress CSS.
  • Enhance Dashicons CSS to behave better when manually added to paragraphs, headings, or list items.
  • Remove underline on Calendar navigation links since we were required to default links to underline per WordPress theme guidelines.
    Other:
  • Fix font color on Title and Text pattern to use Foreground Alt since the background color is dark.
  • Softened the shadow on the Outline and Crisp box shadow styles.
  • Reduced button text line height to 1.25 (was the same as regular text which is 1.5).

= 1.5 =
Apr 7, 2024

• Tested up through WordPress v6.5. Updated CSS for Outline style buttons in the editor so it doesn’t have a background color.
• Enabled “lightbox” (click image to display full-width in popup window) by default (in theme.json). This can be turned off, if desired, in the Global Styles settings.
• Enhance Dashicons CSS to behave better when manually added to paragraphs, headings, or list items.

= 1.4.8 =
Mar 16, 2024

• Added Query No Results block to all the Query Block Patterns in case nothing was found. Note this is mostly for the search results, but will apply to categories and tags, etc. that might not have posts.
• Added right padding to dashicons-before CSS class. Note this has to be added manually in Advanced block settings.
• Added CSS for is-style-no-padding on Query Block. Note this has to be added manually in Advanced block settings.
• Added a filter that child themes can use called ‘flatblocks_allow_page_excerpts’ which can be passed true or false to indicate whether pages should allow excerpts or not. This has always been turned on so that is still the default.

= 1.4.7 =
Feb 16, 2024

• Added more cover images and Block Patterns for them: Book, Building, City Night, guitars, notebooks.
• Changed link underline to sit completely below the bottom of letters (text-underline-position: under).
• Changed comment form label to use medium font weight (font-weight: 400).
• Changed author bio to use normal font size (was .7em).
• Adjust CSS for padding on Post Comments.
• Enhanced block pattern functions to allow child themes to reference local images in block patterns. Add property ‘imageRoot’ => get_stylesheet_directory_uri() when filtering ‘flatblocks_block_patterns’.

= 1.4.6 =
Feb 13, 2024

• Added a new cover image that is an antique typewriter and a Block Pattern to insert it in the Block Editor. The image itself is in the /assets/images/ folder if you want to upload it to your Media Library.
• Changed default box shadows for buttons to “tone them down” from the WordPress defaults. The WordPress defaults from least amount of shadow to the most are: natural, deep, sharp, outline, and crisp. We toned down natura and deep and set the old natural to sharp. Outline and Crips remain the same.
• Enhanced CSS for latest post block featured images with border and image galleries with image titles.
• Changed the Compact Footer Template Parts to consistently use “footer-info” as the ID and CSS class. This is to differentiate them from the larger footers that use “site-footer” ID and CSS class.
• Adjust the bottom padding on featured images in the Latest Posts block.
• Don’t put bullets on Latest Posts block if it is the Grid layout. i.e. Only do it for list style.
• Changed the menu and social link icon hover animations to use “ease-in” instead of “ease” (changed in theme.json).
• Renamed /src/sass folder to /src/scss.

= 1.4.5 =
Jan 25, 2024

• For fixed headers, line up mobile menu open and close buttons.
• Changed custom variable in theme.json –wp–custom–button–shadow to –wp–custom–shadow–default. This specifies a drop-shadow to use or “none” for buttons (and the fixed header). To specify one, use var(–wp–preset–shadow–natural).
• If a default shadow is specified, add it to the fixed header, latest post featured images, and blog featured images in addition to buttons.
• Enhanced CSS for navigation menu hover color to work with colored header backgrounds.
• For Groups with flex (Rows) and “No Wrap” specified, go ahead and wrap on mobile screens. Otherwise, the layout is broken.
• Added a little more space to the top of the Cover Scroll Home Header cover image text.

= 1.4.4 =
Jan 12, 2024

• When a Pages list in a Navigation Block has a drop-down menu, highlight the drop-down title on hover like for other menu items.
• Remove some headers and a footer that were for testing only.

= 1.4.3 =
Jan 11, 2024

• Default Detail Block Header (summary line) to Primary color and set to primary-alt color when open. However, you can choose a font on an individual detail block to override it.
• Font and link colors now default to light color on dark colored backgrounds.
  • For groups, columns, buttons, and paragraphs, foreground-alt is used (off-white by default).
  • For Cover image block, black or white is used like core WordPress does, but base it on the percent opacity of the cover image overlay. 40% or greater will use white, otherwise black is used. For other blocks, such as Groups and Columns, foreground-alt is used on the dark-colored backgrounds.
  • For Navigation Block, replaced some of the CSS by using theme.json. This results in ANY navigation bar using the primary color on hover including the footer nav.
  • For Block Patterns and Template Parts, removed foreground-alt, off-white, and white font colors since they now default based on the background color.
  • Updated Static Map & Address and Jetpack Map & Address Block Patterns (and the footers that use them) to use “Dark” background color instead “Almost Black”. This will leave the link color as “Primary” instead of changing it to “Foreground Alt” based on the new default link color rules above.
  • Updated all the necessary Global Theme Styles to add a bit of CSS to override some of the above font and link color defaults. Mainly for the shades of yellow where dark text is more readable than off-white.
• Added Custom Block Styles for Links:
  • Link Underline on Hover for Paragraph, List Item, Latest Posts, Latest Comments, Page List, and Post Title
  • Link Underline and Link No Underline for Post Title and Post Terms. Set Post Terms (category and tag lists) to not underline links by default.
• Adjusted top and bottom spacing on comment section.
• Fixed typo on the word “Query” in various Block Patterns and the corresponding language translation file (.pot).
• Enhanced smooth scroll javascript for potential future additional header type.

= 1.4.2 =
December 12, 2023

• Breaking change to default link underlines
  • Default links to have underlines to comply with WordPress.org theme guidelines where “underline is the only accepted method of indicating links within the content”. Note that we had already turned off link underlines on numerous blocks (via Global Styles), such as lists, category and tag cloud, etc. so this should just properly underline links in your main content.
  • Due to above, updated various Template Parts and Patterns to not underline links. e.g. Page Home pattern, Page Portfolio pattern, Pricing Table patterns.
  • Added Custom Block Style for List Items to specify link underline or not.
• Adjustments to horizontal padding
  • Adjusted spacing on post author avatar and bio on Author Page Template.
  • Removed specific horizontal padding from the Compact Footer and Fixed Header Template Parts so that it defaults to the global style Layout -> Padding setting. Adjusted Editor CSS for this.
  • In the Editor, fix left padding on Latest Posts list when styled with Bullets.
• Changes to global theme styles
  • Renamed Global Theme Style “Dark – Almost Black” to “Dark – Very Dark Gray” to more accurately reflect the background color.
  • Changed Global Theme Style “Default – Auto Dark Mode” to have the WordPress Admin Bar (if turned on by the logged in user) to Almost Black color to distinguish it from the dark background color.
  • Reordered the global theme styles: Move Dark Midnight Blue, Dark Almost Black, and Auto Dark Mode earlier in the list. Move Default with Shadow and Default Blue Links towards the end of the list. This shows off more of the color options earlier in the list.
• Changes to cover images block patterns
  • Changed all the Cover Image Block Patterns to have the subtitle as Heading Level 3 (H3) instead of H2. The Title is still H3.

= 1.4.1 =
December 2, 2023

• Updates for WordPress v6.4:
  • Updates to Editor styles for older HTML-based buttons, forms, etc. WordPress v6.4 has removed the .wp-site-blocks class from the block Editor so all the styles using that had to be updated.
  • Default column spacing (gap) on flex columns just like on other columns (by default 18px). WordPress v6.4 sets this to zero for some reason so there is no spacing between columns. Note that the user can override this on individual columns blocks, if desired.
  • In the Editor, fix site title link to be the primary color.
  • Fix custom styles for List block with Checkmarks and Plain Centered.
  • For theme users coming from the TwentyTwentyThree or TwentyTwentyFour theme, changed the mapping of that theme’s base color to our foreground-alt color, base color 2 to light gray and base color 3 to gray. This is mainly for when a user set their background and foreground to one of these base colors. In that case, the text would be indistinguishable from the background.
• Don’t set older-style input buttons to have light border on colored backgrounds. Instead, users can replace the older style buttons with the Button block and choose Outline style.
• Added custom styles for user to set link underline or not on Categories, Latest Posts, Latest Comments, and Page List blocks.
• For global theme style Source Sans & Source Serif Pro, slightly increase the font weight on the Site Title block because this font is very thin.