Flat Blocks WordPress Theme v1.4 Updates

We have been hard at work on enhancements and fixes to the Flat Blocks WordPress theme. The latest release is version 1.4. There have been 13 updates to it since v1.3.

Here is a summary of the most important updates through version 1.4:

• Added 2 New Block Patterns: Content with Right Sidebar, Content with Left Sidebar,
• Added 5 New Page/Post Templates: Page Featured Image with Left Sidebar, Page Featured Image with Right Sidebar, Post Featured Image with Left Sidebar and Post Featured Image with Right Sidebar, Post No Comments
• Enhancements to allow manually adding Dashicon icon classes. e.g. “dashicons dashicons-before dashicons-arrow-up-alt2” classes added to a paragraph will add an up arrow icon before the text.
• Fixed Headers now stick to the top in the Block Editor like they do on the front-end.
• Enhancements to Smooth Scrolling javascript to account for fixed header.
• Added support for Aspect Ratio for images (introduced in WordPress v6.3).
• Enhanced performance by refactoring flat-blocks.css and custom-styles.css to move non-critical core block styles to custom-styles.css. This way the flat-blocks.css file contains all the styles needed to render the vast majority of “above the fold” content.
• Fixes to Query Patterns for websites running PHP 8+.
• Added link hover color to the header navigation menu and highlight the currently selected menu item.
• Numerous additional bug fixes and enhancements to improve the look and usability of the theme.

Release Notes

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

= 1.4 =
November 23, 2023

* Block Patterns
* Added Block Patterns for Content with Right Sidebar and Content with Left Sidebar. This allows you to make any individual page or post have a custom sidebar that you can put anything you want into.
* Fix Pattern Image with Computer Screen Title and Text to use the newer preset spacing format.
* Changed the full-page Block Patterns for About, Home, Portfolio, and Services to use the other block patterns to build the page (

) rather than the custom function flatblocks_get_block_pattern(). This makes the code easier to maintain.

* Global Styles Enhancements
* Changed the default global style setting to not underline links except for in paragraph blocks. Previously link underlines were defaulted everywhere but then overridden in global styles for most blocks, such as the site title, list block, query pagination, etc. By changing to no link underline except in paragraphs, 3rd-party plugin content links will not default to having underlines. We had already provided custom styles on paragraphs to either show or not show link underlines, so this can continue to be controlled at the individual paragraph block level.
* Center separator block by default (change left and right margin in global theme styles to “auto”).

* CSS Enhancements and Fixes
* Enhancement for the WordPress v6.4 new image “lightbox” (“expand on click”): Hide caption on our custom style for Image with Computer Screen.
* Lighten day numbers on Calendar block when using a global theme style with a dark background.
* Enhance CSS to allow users to manually add Dashicon icon CSS to paragraphs. e.g. “dashicons dashicons-before dashicons-arrow-up-alt2” will add an Arrow Up icon before a text link, such as in the footer nav.
* Enhanced the CSS for theme compatibility with background/base and foreground/contrast colors. This is for users of TwentyTwentyThree and other themes that use base and contrast colors moving to this theme which uses background and foreground colors. Accent color(s) now map to this theme’s primary color too.
* Style older form reset button styles to match the theme button styles.
* Align built-in (Dashicon) icons to the top so they align better with text.
* Default social link icons to be centered.

* Javascript Enhancements
* Enhance smooth scrolling on internal links to page or post comments to account for fixed header height.

= 1.3.12 =
September 26, 2023

* Enhance CSS for Social Links, Paragraph “link no underline” style, Query block needed for WordPress.org theme preview.

= 1.3.11 =
September 26, 2023

* Enhance CSS for horizontal padding and buttons on colored backgrounds primarily for when previewing the theme on WordPress.org.
* Increase font-weight on comment author name.

= 1.3.10 =
September 16, 2023

* Defaulted links to underline on post/page content and in comment contents per WordPress.org Theme Guidelines. So then set various other theme elements to not underline links in theme.json, such as post title, post date, post author name, lists, etc. Also updated the various footer template parts to set the paragraph style to not underline links. Note that the no underline paragraph style was also changed to “is-style-link-no-underline” (previously it was “is-style-no-link-underline”).
* Increased the font weight on the new WordPress v6.3 Details Block heading line (called “Summary”).
* Center-align captions by default in the Block Editor. The CSS there is different than on the front-end, so had to add this to /assets/css/editor-styles.css.

= 1.3.9 =
September 11, 2023

* Added “Page Featured Image with Left Sidebar” and “Page Featured Image with Right Sidebar” templates for those that like a more “classic” look to certain pages.
* Enhanced footers with maps to not have top and bottom margin on them since these footers have dark backgrounds and would let the light background show through. Also updated the contact info on them to include an email address.
* Enhanced functions.php to add two new filters that can be used to alter the way WordPress and this theme loads its stylesheets. By default, everything works the same way as it has in prior versions, so you shouldn’t see any difference. If a child theme overrides these default values, it will tell WordPress and/or this theme to load individual block styles separately. The logic is smart enough to only load block styles for ones in use on any given page or post. This enhancement was done to pave the way for taking advantage of any performance enhancements in WordPress. From our testing, however, this tends to lower performance scores not improve them so that is why this is turned OFF by default. To override the defaults and turn on separate block style loading, add the following to functions.php in your child theme.
add_filter( ‘should_load_separate_core_block_assets’, ‘__return_true’ );
add_filter( ‘flatblocks_should_load_separate_block_assets’, ‘__return_true’ );
* As a result of above, we are now including invidual block styles in the /assets/css/blocks/ directory. These are only used if you override the default setting above, but if you do, they are needed.
* Simplified CSS in editor-styles.css to remove .is-root-container before each CSS style because that was only needed when also loading these styles on the front-end.
* Enhanced CSS in the Editor for horizontal spacing (padding) on tablet and mobile.
* Enhance CSS for groups that are header, footer, or main. Top padding will be removed automatically and left and right padding will depend on whether site horizontal spacing is needed (.has-global-padding).
* Enhanced our function that loads block patterns to alter the theme name not just for child themes but now also for parent themes created from Flat Blocks. i.e. The theme slug is now overridden whenever the theme slug isn’t exactly ‘flat-blocks’.

= 1.3.8 =
September 9, 2023

* Enhanced Post Featured Images to use the new WordPress v6.3 “aspect ratio” feature to set them to 16:9 format. This is the format the theme has always intended to use and all included images are in that format and the theme even adds two additional image sizes that are also 16:9 format. Now this aspect ratio will be honored on all Post Featured Images. Note that this was NOT done to Cover images. Those images are intended to also be in 16:9 format, but the user can set the “minimum height” to make them shorter and we don’t want to override that.
* Updated border and spacing on some styles in theme.json to prevent crashing the Editor. Specifically these were values set to reference other styles (“ref”:). These are replaced now with custom border settings (–wp–custom–border–style and –wp–custom–border–radius) and preset spacing (–wp–preset–spacing–40). Block Styles effected are: Code, Featured Image, Spacer, Separator.
* Put back default of centering figure captions (images and tables) as there are some situations where the user can’t alter it, such as when left or right aligning an image.
* Moved all editor styles into their own stylesheet (/assets/css/editor-styles.css). This reduces the front-end CSS which helps performance a bit.
* Removed ID’s from all images and queries used in patterns. They weren’t a problem, but WordPress suggests removing them.
* Refactored flat-blocks.css and custom-styles.css to move non-critical core block styles to custom-styles.css. This way the flat-blocks.css file contains all the styles needed to render the vast majority of “above the fold” content. Also, we implemented SASS behind the scenes to generate the theme’s CSS files. This will let us change how various styles load more easily in the future.

= 1.3.7 =
September 7, 2023

* Style the Tag and Category Cloud alternate Outline style to use the theme’s border radius (5px by default) and padding.
* Enhancement to Block Styles logic to allow inlining styles or referencing a registered style handle. This is mainly for child themes or possible future performance enhancements as WordPress v6 evolves.

= 1.3.6 =
September 6, 2023

* Quick fix for Custom Block Styles not loading (block-styles.php).

= 1.3.5 =
September 6, 2023

* Quick fix for Query Patterns: Sidebar Left, Sidebar Right, and Single Column that were creating issues if running PHP v8+.
* Quick fix for Cover Colored Blocks Pattern.
* Enhanced block-styles.php to not issue a PHP warning if malformed block array passed to it. This is a nice touch for child themes that may add a filter to override or add custom block patterns.

= 1.3.4 =
September 5, 2023

* In header navigation, use the primary color as the link hover color. Note that if the header color is overriden by the user, this won’t apply. The chosen color will just be lightened like it worked prior to this change.
* In header navigation, also highlight the current menu item (or parent item). By default, the primary color will be used (light green). On user-colored headers, bold will be used.
* Reduce default cover image overlay color to 40% (was 60%) on the colored block image to allow more of the image’s natural colors to show through.
* Updated screenshot to reflect highlight of home page link and lightening of cover overlay in the site header.
* Set footer columns to use thick gap to match pages with sidebars. The thick gap style is twice the standard block gap (which is preset spacing 40 that is responsive up to 18px). So the gap is up to 36px now.
* Don’t automatically center figure captions (image, table, etc.) since the user can specify what position they want it in (and it defaults to left).
* Added an anchor link of #wrapper at the top of each page for the theme preview on WordPress.org and for users with older navigation menus that point to that as it was the standard on older WordPress themes (before Block based themes). This theme uses #page and that still works as well.

= 1.3.3 =
September 3, 2023

* Locked numerous theme elements that are critical to the templates, such as the main group for the page/post, sidebar on the templates with sidebars, etc. These can always be unlocked by the user, but will prevent accidentally deleting critical template components.
* Set separators to not default to centered (but of course allow the user to center them).
* Removed footer from Post Content Only template. This template is designed to be like a “landing page” where all of the content is built on the page itself. i.e. The user will create a unique header and/or footer, if desired.
* Enhanced CSS for:
* WordPress Admin Bar on mobile to make sure it stays in its fixed position.
* Padding and background color on Fixed headers.

= 1.3.2 =
September 1, 2023

* Added Post Featured Image with Left Sidebar and Post Featured Image with Right Sidebar templates for those that like a more “classic” look to their blog posts.
* Turned off WordPress loading core block CSS files separately. This was supposed to improve performance, but in practice it doesn’t because it causes more files to need to load before the page displays.
* Enhanced the CSS for horizontal spacing on mobile. Don’t allow user to set it to zero on headers, footers, or on the comments template part.
* Enhanced the CSS for cover block inner content to allow for full-width groups if desired. The default is still wide-width though.
* Enhanced Dashicons CSS so the icons better match the element you are placing them on. For example to match the font size and font weight.
* Set links and navigation links to simply default their font-weight (by removing the font-weight designators in theme.json). This allows the font-weight to be overridden on individual blocks. Also, set hover color on Site Title link.
* Enhanced the smooth scroll javascript to better calculate the scroll position with the new fixed header logic.
* Set dependencies on child theme styles so they are sure to load after the Flat Blocks ones.

= 1.3.1 =
August 31, 2023

* Rewrote all the logic for Fixed Headers and Fixed Nav Menus. They now both work in the Site Editor! The extra “hidden” group for the #page anchor for smooth scrolling isn’t needed anymore either. This also removes the requirement for the fixedheader javascript, so site performance is improved.
* Disabled the “Sticky” Group block option in the Editor because it didn’t work anyway and could conflict with the new fixed header logic.
* Adjusted the smooth scroll javascript to work with this new fixed header method.
* Tweaked the CSS for horizontal padding and vertical margin on the front-end and in the editor. Updated some of the custom styles to use block-gap instead of preset-spacing-40. This was only done where it was used for the same purpose as vertical gap.
* Fix for child theme style.css not loading in the Block Editor
* As a result, the Editor now matches the front-end even better!
* Added new Post No Comments Template for when there are historical comments that you no longer want to display on a post.
* Tweaks to the CSS for plain style lists (no bullets or numbering) to add some bottom margin to better separate them.
* Adjusted small and normal social icon sizes up a bit (22px and 26px respectively).
* No longer load the theme’s style.css since it is only required by WordPress to describe the theme itself. There is no actual CSS in it. The CSS for this theme is in /assets/css/flat-blocks.css and /assets/css/custom-styles.css.
* For child themes, their /assets/css/custom-styles.css will now be automatically loaded into the Editor if it exists.
* Updated this readme.txt file to clarify and enhance instructions for creating a child theme.
* Updated the Custom Block Styles logic to allow for non-core styles. This was done in case anyone wants to add custom block styles to blocks added with a plugin, such as Jetpack. Just pass in jetpack/whatever-block instead of core/whatever-block or just whatever-block.