blockifywp / theme

Blockify Theme

Blockify Theme

Lightweight full site editing block theme framework. Blockify provides useful features that help you build modern WordPress sites with blocks. Optimized for speed - loads zero CSS, JavaScript, image or font files by default. Customization settings include SVG icons, custom Google Fonts, box shadows, gradient text, absolute positioning, responsive settings, negative margins and more. Designed for use with child themes and compatible with most popular plugins. Blockify is a great starting point and toolkit for building your own custom block theme.

Installation

1. In your site's admin dashboard, go to Appearance > Themes and click Add New.
2. Type "Blockify" in the search field.
3. Click Install and then Activate to start using the theme.
4. Navigate to Appearance > Customize in your admin panel and customize to your needs.
5. A notice box may appear, recommending you to install the Blockify plugin. You can either use it or any other block toolkit.
6. Navigate to Appearance > Editor.
7. With the Site Editor open, click the inserter icon, pick one of the many ready-made blocks or patterns then click to insert.
8. Edit the page content as you wish, you can add, remove and customize any of the blocks.
9. Enjoy :)

Features

• Block Supports API: Easy to use PHP API for modifying core block supports. This allows for conditional block supports, or extra settings for core blocks. By default, Blockify enables extra block supports where possible.
• Block Styles API: Easy to use PHP API for modifying core block styles that usually require JS. Conditional registration supported - for example, only register a "Secondary" block style if a secondary color has been defined in the theme or editor.
• Block Extensions: Additional appearance controls for all blocks including box shadows, absolute positioning, CSS transforms, CSS filters and more.
• Full Site Editing: Additional page, post and template part settings provided to make customizing individual pages easier.
• SVG Icons: Inline SVG icons can be created with the image block or as inline text. Default icons included are WordPress, Dashicons and Social Icons. Also supports custom SVGs. Search for "Icon" in the block inserter.
• CSS Framework: Minimal base FSE CSS framework. All CSS files have are split and are conditionally loaded only when required by a page. Fixes some core CSS issues
• Local Fonts: Collection of the most popular variable Google Fonts. Only fonts selected in Site Editor > Styles will be loaded.
• Gradients: Gradient rich text formats and text block gradient settings.
• Text Formats Additional text formats including clear formatting, underline, gradients, font sizes and more.
• Responsive Settings: Reverse on mobile, hide on mobile and more.
• Header Styles: Support for absolute, transparent and sticky headers.
• Mega Menu: Create simple, multi-column dropdown menus using the core submenu block.
• Search Toggle: Full screen, CSS-only, search form toggle.
• Dark Mode: Automatically enables dark mode for any supported theme. Dark mode can be deactivated from the Blockify settings available in the page editor.
• eCommerce Support (coming soon!): Full support coming for both WooCommerce and Easy Digital Downloads.
• Block Library: Blockify should work out of the box with any block library plugin, and a free Block Library plugin is also available for download on both WordPress.org and GitHub.

Requirements

• WordPress ^6.3
• PHP ^7.4

Contributing

All contributions and questions are welcome. Please feel free to submit GitHub issues and pull request. All feature requests will be considered.

Support

Visit https://github.com/blockifywp/theme/issues to submit a support ticket.

theme's Issues

Broken after your "complete rebuild" version released 8 November 2023

please upload the old version of blockify theme 1.2.9 & saasify 0.10

you have noted in changelog "complete rebuild" for both

this has broken our website. we cannot see the header footer & other pages.

each error revision suggests failure to retrieve the header footer components

Notice: Undefined index: slug in /wp-includes/class-wp-list-util.php on line 170

Add vendor/ at release time

Hello! Please consider adding vendor when making a release by a CI workflow.

Current build:zip should be simply git archive --output=.build/blockify.zip. It is very easy to set up.
I would gladly implement it.

Border settings not working for image block

The missing framework

Looking at includes/blocks/button.php I miss a framework that helps manipulate HTML chunks without dom/string/array operations.

1. @seothemes Do you know one?
2. I'm planning to design it with top-down programming - meaning writing the block's code first then the underlying framework

Add basic styling and support for form plugins

• Ninja forms
• WP forms
• Gravity forms

Add responsive positioning and transform controls

Text gradient and brush underline conflict

InlineSVg.php error

I am using this theme seeing this error in the log file.

• Bitnami Amazon lightsail
• Using wordpress version (latest)
• Apache

CRITICAL Uncaught TypeError: DOMDocument::importNode(): Argument #1 ($node) must be of type DOMNode, null given in /bitnami/wordpress/wp-content/themes/blockify/vendor/blockify/framework/src/BlockSettings/InlineSvg.php:173
Full error log.

2024-03-31T12:46:52+00:00 CRITICAL Uncaught TypeError: DOMDocument::importNode(): Argument #1 ($node) must be of type DOMNode, null given in /bitnami/wordpress/wp-content/themes/blockify/vendor/blockify/framework/src/BlockSettings/InlineSvg.php:173
Stack trace:
#0 /bitnami/wordpress/wp-content/themes/blockify/vendor/blockify/framework/src/BlockSettings/InlineSvg.php(173): DOMDocument->importNode()
#1 /opt/bitnami/wordpress/wp-includes/class-wp-hook.php(324): Blockify\Framework\BlockSettings\InlineSvg->render_inline_svg()
#2 /opt/bitnami/wordpress/wp-includes/plugin.php(205): WP_Hook->apply_filters()
#3 /opt/bitnami/wordpress/wp-includes/class-wp-block.php(293): apply_filters()
#4 /opt/bitnami/wordpress/wp-includes/class-wp-block.php(244): WP_Block->render()
#5 /opt/bitnami/wordpress/wp-includes/blocks.php(1484): WP_Block->render()
#6 /opt/bitnami/wordpress/wp-includes/blocks.php(1522): render_block()
#7 /opt/bitnami/wordpress/wp-includes/blocks/pattern.php(51): do_blocks()
#8 /opt/bitnami/wordpress/wp-includes/class-wp-block.php(258): render_block_core_pattern()
#9 /opt/bitnami/wordpress/wp-includes/class-wp-block.php(244): WP_Block->render()
#10 /opt/bitnami/wordpress/wp-includes/blocks/post-template.php(119): WP_Block->render()
#11 /opt/bitnami/wordpress/wp-includes/class-wp-block.php(258): render_block_core_post_template()
#12 /opt/bitnami/wordpress/wp-includes/class-wp-block.php(244): WP_Block->render()
#13 /opt/bitnami/wordpress/wp-includes/class-wp-block.php(244): WP_Block->render()
#14 /opt/bitnami/wordpress/wp-includes/blocks.php(1484): WP_Block->render()
#15 /opt/bitnami/wordpress/wp-includes/blocks.php(1522): render_block()
#16 /opt/bitnami/wordpress/wp-includes/blocks/pattern.php(51): do_blocks()
#17 /opt/bitnami/wordpress/wp-includes/class-wp-block.php(258): render_block_core_pattern()
#18 /opt/bitnami/wordpress/wp-includes/class-wp-block.php(244): WP_Block->render()
#19 /opt/bitnami/wordpress/wp-includes/blocks.php(1484): WP_Block->render()
#20 /opt/bitnami/wordpress/wp-includes/blocks.php(1522): render_block()
#21 /opt/bitnami/wordpress/wp-includes/blocks/pattern.php(51): do_blocks()
#22 /opt/bitnami/wordpress/wp-includes/class-wp-block.php(258): render_block_core_pattern()
#23 /opt/bitnami/wordpress/wp-includes/blocks.php(1484): WP_Block->render()
#24 /opt/bitnami/wordpress/wp-includes/blocks.php(1522): render_block()
#25 /opt/bitnami/wordpress/wp-includes/block-template.php(263): do_blocks()
#26 /opt/bitnami/wordpress/wp-includes/template-canvas.php(12): get_the_block_template_html()
#27 /opt/bitnami/wordpress/wp-includes/template-loader.php(106): include('...')
#28 /opt/bitnami/wordpress/wp-blog-header.php(19): require_once('...')
#29 /opt/bitnami/wordpress/index.php(17): require('...')
#30 {main}
  thrown in /bitnami/wordpress/wp-content/themes/blockify/vendor/blockify/framework/src/BlockSettings/InlineSvg.php on line 173

Icon circle flash on site editor reload

Add wp.org deployment action

There are no existing workflows available for themes, only plugins.

Tag releases here on GitHub

I cannot send tags in PR-s.
May I send git tag v... commands here in this issue?

theme/readme.txt

Lines 62 to 354 in 092fffb

	= 0.3.12 - 7 September 2022 =
	* Fix: No dark mode config
	= 0.3.11 - 7 September 2022 =
	* Remove: Admin notice for Gutenberg plugin
	* Update: Version bump for wp.org
	= 0.3.10 - 6 September 2022 =
	* Fix: Resize screenshot
	= 0.3.9 - 6 September 2022 =
	* Add: 14px font size
	* Update: Adjust colors
	* Remove: Style variations
	* Remove: Pro patterns
	= 0.3.8 - 6 September 2022 =
	* Update: Clean up patterns
	* Fix: Navigation links for wp.org
	= 0.3.7 - 6 September 2022 =
	* Fix: Remove pattern functionality
	= 0.3.6 - 6 September 2022 =
	* Fix: Add missing vendor packages!
	= 0.3.5 - 6 September 2022 =
	* Fix: Add missing vendor packages
	= 0.3.4 - 6 September 2022 =
	* Fix: Patch string case utility function
	= 0.3.3 - 6 September 2022 =
	* Add: Light and dark patterns
	* Remove: Gutenberg and Blockify plugin dependencies
	* Remove: Editor settings panel
	* Remove: Automatic dark mode feature
	= 0.3.2 - 3 September 2022 =
	* Add: Excerpt length setting to editor
	* Add: Hide on mobile settings to supported blocks
	* Add: Center on mobile to supported blocks
	* Add: Block gap support for Query block
	* Add: Spacing support for quote block
	* Add: Tag cloud correct fallback font size
	* Update: Move remaining CSS to theme.json where possible
	* Update: Change default block gap from em to rem
	* Update: Separate scripts and styles includes
	* Remove: Single block pattern from theme.json
	* Fix: Render position styles
	* Fix: Input heights to match buttons
	* Fix: Rest options permissions callback
	* Fix: Remove theme slug from single post template for child theme support
	* Fix: Permissions callback for rest options
	= 0.3.1 = 2 September 2022 =
	* Remove: tgmpa languages
	= 0.3.0 - 1 September 2022 =
	* Add: Spacing scale
	* Add: Gradient support for submenu, paragraph, site-logo and template part
	* Add: Editor page title text alignment
	* Add: Custom property filters where possible
	* Add: Quote block and post author avatar border radius support
	* Add: Basic CSS for elements without block classes
	* Add: Position support to columns
	* Add: Blog features post pattern
	* Update: Post template layout
	* Update: Post title hover effects
	* Remove: Page title settings
	* Fix: Post block CSS file not loaded
	* Fix: Legend/fieldset border-box issue
	* Fix: Placeholder image sizes
	* Fix: Gradient support not working from incorrect key name
	* Fix: Gutenberg 14.0.1 outline button padding issue
	= 0.2.1 - 29 August 2022
	* Remove: Dark mode preview setting
	= 0.2.0 - 29 August 2022 =
	* Add: Style guide pattern
	* Add: Post featured image border radius
	* Add: IBM Plex Sans & Mono, DM Sans, Source Serif Pro
	* Add: Global API key settings
	* Add: Page list block spacing support
	* Update: All settings to use Rest API
	* Update: Front page template blog pattern
	* Update: CSS loading optimizations
	* Update: Switch to dynamic render block filters
	* Update: Alignment improvements
	* Update: Move all settings to rest api
	* Remove: Single block pattern template
	* Remove: Link box shadow hover effect
	* Fix: Full width template footer template part
	* Fix: Default border color contrast
	* Fix: Icon even/odd fill rules
	= 0.1.4 - 22 August 2022 =
	* Add: Color fallbacks in theme.json
	* Update: Clean up style variation json
	* Fix: Box shadows
	* Remove: PHP CSS minification utility
	* Remove: Footer social links
	= 0.1.3 - 22 August 2022 =
	* Update: Link styling improvements
	* Update: Color palette adjustments
	= 0.1.2 - 22 August 2022 =
	* Add: Social icon block to footer default pattern
	* Update: Footer pattern improvements
	* Remove: Links in footer patterns
	* Fix: Pattern preview alignment
	= 0.1.1 - 22 August 2022 =
	* Fix: Remove testing css
	= 0.1.0 - 22 August 2022 =
	* Add: Spacing controls to post content block
	* Add: Single columns testimonial pattern
	* Add: Conditional loading for admin bar styles
	* Add: Custom property support for cite element
	* Update: Single block pattern improvements
	* Update: Refactor query block files
	* Update: Only set scrollbar width on desktop
	* Fix: Heading styles to pages without heading block
	* Fix: Post content layout inheritance
	* Fix: Improve wp.org pattern display
	= 0.0.33 - 22 August 2022 =
	* Add: Full width template
	* Add: WP.org pattern temporary css
	= 0.0.32 - 22 August 2022 =
	* Fix: Custom properties not showing in admin
	= 0.0.31 - 21 August 2022 =
	* Add: More Google Fonts
	* Add: wp-element-button class to search blocks
	* Update: Clean up style variations
	= 0.0.30 - 21 August 2022 =
	* Add: Blueprint style variation
	* Add: Dark style variation
	* Add: Wireframe style variation
	* Fix: Google fonts in editor
	= 0.0.29 - 21 August 2022 =
	* Add: Placeholder image style
	* Add: Group min height setting
	* Update: Rename patterns
	* Update: Search toggle improvements
	* Remove: Page patterns
	* Fix: Cover image defaults
	* Fix: Remove duplicate classes in blocks
	* Fix: Sub menu styling
	= 0.0.28 - 20 August 2022 =
	* Add: Featured post placeholder divs
	* Fix: Site logo icon position
	* Fix: Wide alignment in patterns
	* Fix: Missing inline editor styles
	= 0.0.27 - 20 August 2022 =
	* Add: Support for image borders
	* Add: Spacer block styles
	* Update: CSS loading improvements
	* Update: Theme description
	* Fix: Broken image urls in patterns
	= 0.0.26 - 19 August 2022 =
	* Add: Dark mode editor settings
	* Add: Outline button style
	* Remove: Secondary button style
	= 0.0.25 - 14 August 2022 =
	* Fix: WordPress update issue
	* Update: Screenshot and changelog
	= 0.0.24 - 14 August, 2022 =
	* Add: Dark mode
	* Add: Page title settings
	* Add: Absolute & sticky header support
	* Add: Multi column sub menus
	* Fix: Blog patterns
	* Update: Smooth scroll media query
	* Remove: Template part settings
	= 0.0.23 - 2 August, 2022 =
	* Fix: Navigation blocks in patterns
	= 0.0.22 - 2 August, 2022 =
	* Fix: Patterns for release
	* Add: TGMPA for Gutenberg
	* Update: Screenshot
	= 0.0.21 - 2 August, 2022 =
	* Remove: Theme URI
	* Remove: Emoji scripts
	* Add: SVG image icons
	* Fix: Filter and transform settings
	* Update: Move languages
	* Update: Move scripts to assets dir
	= 0.0.20 - 27 July, 2022 =
	* Fix: Box shadow bug
	= 0.0.19 - 27 July, 2022 =
	* Fix: Site editor assets
	* Add: Border custom property
	* Remove: Unused functions
	= 0.0.18 - 27 July, 2022 =
	* Fix: Missing block editor styles
	* Fix: Layout defaults
	= 0.0.17 - 26 July, 2022 =
	* Fix: Button errors in patterns
	* Fix: Responsive styles
	* Remove: Unused style.css
	= 0.0.16 - 26 July, 2022 =
	* Remove: _MACOSX folder
	= 0.0.15 - 26 July, 2022 =
	* Remove: TGMPA
	* Remove: Gutenberg as dependency
	* Fix: Patterns
	= 0.0.14 - 26 July, 2022 =
	* Remove: Plugin dependency
	* Remove: Logo Ipsum logos
	* Add: Theme settings
	* Add: Page patterns
	* Update: Theme URI
	* Fix: Pattern dummy content
	* Fix: Reverse on mobile
	* Fix: Navigation block font size
	* Fix: Image block CSS
	= 0.0.13 - 24 July, 2022 =
	* Update: Recommend plugins instead of require
	* Fix: Block validation errors (remove plugin blocks)
	* Update: Screenshot image text
	* Remove: Auto insert nav menu
	* Add: License information
	* Add: Link underline styling
	= 0.0.12 - 22 July, 2022 =
	* Add: FAQ 2 pattern
	* Update: About page pattern, hero 2 pattern
	* Fix: Button element Gutenberg issue
	= 0.0.11 - July 19, 2022 =
	* Add: Metrics 2 pattern
	* Add: Copyright in readme
	* Update: Screenshot.png
	* Fix: Version number in changelog
	= 0.0.10 - July 19, 2022 =
	* Add: Nofollow link on pattern previews
	= 0.0.9 - July 19, 2022 =
	* Add: Pattern previews
	* Update: Block pattern directory
	= 0.0.8 - July 15, 2022 =
	* Fix: RSS feed error
	= 0.0.7 - July 15, 2022 =
	* Fix: Default navigation block URLs
	* Remove: CSS
	* Remove: Includes directory
	= 0.0.6 - July 14, 2022 =
	* Add: Move CSS to theme
	* Add: Includes directory
	= 0.0.5 - July 14, 2022 =
	* Add: Demo content and images
	* Fix: Local URLs in patterns
	= 0.0.4 - July 14, 2022 =
	* Fix: Theme review feedback
	= 0.0.3 - July 13, 2022 =
	* Remove: Theme activation redirect
	= 0.0.2 - June 12, 2022 =
	* First submission
	= 0.0.1 - March 23, 2022 =
	* Initial release

Dynamically enqueue webfonts in editor

Fonts should be dynamically loaded when selected, instead of requiring a browser refresh

Package type "wordpress-dropin" breaking workflow

Post page title is not available

There is no <h1 post page title is available when we have custom post page set in Settings > Reading

==
A user can always hide the post page title under post/page setting in Blockify theme.

WP-element-button not working with latest Gutenberg version

Navigation block gap not working

iPhone zoom on Search input box

When using iPhone and clicking the "Search" magnifying glass icon in Blockify, the device zooms in on the search box, and remains zoomed in even after leaving the input box. This is due to a well-known issue/functionality of iPhone that zooms into inbox boxes whose text size is less than 16.
Can we increase the default text size of the search box to 16, or otherwise how can it be done on a case-by-case basis if the user chooses?

To reproduce:
Open a Wordpress site with Blockify theme using iOS device.
Click the Search button to open the input box.
Start typing something.

Fatal error after upgrade to 1.0.0

Hi!

Im getting a fatal error in the front-end and in the editor on one of my pages after upgrading Blockify to 1.0.0:

Any idea on how to solve this?

Dark Mode enabling even though default is light mode

In the editor it shows up as light mode which is the correct depiction. User preference settings are also light mode.

When deployed: default shows as dark mode. When i toggle the button once it stays dark mode but when i toggle it again it goes back to light mode.

This only became an issue after I did an update yesterday, did something recently change?

Alternetively how can I remove dark mode entirely the existing instructions don't seem to work

theme is not working suddenly : There has been a critical error on this website.

Mobile menu item spacing

Add source JS/TypeScript files

Need to add the src directory and include JS in the CI workflow. This will add some complexity, since it’s all TypeScript and some of the core WordPress packages don’t have full support yet. For example experimental components such as the NumberControl.

add boxed-layout support

As discussed, we will add a div before wp-site-blocks markup and enable a boxed layout in Styles > Layout.

When Boxed layout is enabled, alignwide will minus the grid gap for a better spacing. Background, margin and paddings settings required minor adjustments.