Frontend Features

Pipelines

WP BOX WordPress theme includes pipelines for compilation and dependency enqueuing preconfigured to work on specific directories in the project.

	"scripts": {
		"start-tailwind": "npx tailwindcss -i ./styles/src/tailwind.css -o ./styles/dist/tailwind.css --watch=always",
		"lint-js": "npx eslint .",
		"format-js": "npx eslint --fix .",
		"gulp": "gulp",
		"start-components": "webpack --watch --config ./webpack/webpack.components.js",
		"start-gutenberg-variations": "webpack --watch --config ./webpack/webpack.gutenberg-variations.js",
		"start-gutenberg-hooks": "webpack --watch --config ./webpack/webpack.gutenberg-hooks.js",
		"start-gutenberg-scripts": "webpack --watch --config ./webpack/webpack.gutenberg-scripts.js",
		"start-gutenberg": "wp-scripts start --config ./webpack/webpack.gutenberg.js",
		"start-svg": "wp-scripts start --config ./webpack/webpack.global-svg.js",
		"start-imgs": "wp-scripts start --config ./webpack/webpack.global-images.js",
		"start": "npm-run-all --parallel start-tailwind start-gutenberg start-components start-gutenberg-scripts start-gutenberg-hooks start-gutenberg-variations gulp"
	},

Gutenberg Blocks

public static function theme_gutenberg_blocks()
	{
		$blocks_parent_directory = get_template_directory() . '/blocks/';

		// Scan and register blocks from the parent theme directory
		self::register_blocks($blocks_parent_directory, false);

		if (is_child_theme()) {
			$blocks_child_directory = get_stylesheet_directory() . '/blocks/';
			// Scan and register blocks from the child theme directory
			self::register_blocks($blocks_child_directory, true);
		}
	}

Block Overrides, Variations and Patterns

Theme features another solution for simple and unified implementation of overrides, variations and patterns. Backend classes ThemeBlocksOverrides, ThemeBlocksVariations and ThemeBlocksPatterns are responsible for scanning respective directories and implementing hooks.js and filters.php defined in the folder during the initialization.

Note the screenshot with the example on how the core/code block is overriden, which you saw on this page.

Examples of blocks included in the project

The project includes several dozen ready-made blocks and overrides of core blocks that you can learn from to create your custom blocks, use them as is, or modify to your needs:

• Section: Container block which allows you to add a limited set of nested child blocks. Set the section’s background color and fill it with other blocks. All sections have unified padding styles, so they look good and visually separate information. This page has some sections.
• Paragraph: This is a standard core block, but modified to support the sizes and fonts specified in the Tailwind configuration. Unnecessary settings are disabled. Now, the author of the article won’t make a mistake when choosing the color, font, and size, and all paragraphs on the site will look in consistent style.
• Queried Object Template: This block can be used to display the latest news or other items but within a custom template and settings. Wrapper settings support flexbox and you can justify and align content as you like.
• Section Menu: This block automatically creates a dynamic menu from the section headers, which remains on the screen while the user is viewing the section. Clicking on the links in the menu smoothly scrolls the screen to the corresponding header in the section. This section has that block, check it out!
• Payment Button: A block where you specify the product, currency, and additional text. Clicking on the button triggers a series of scripts that interact with the backend. Wherever you place the button, it will trigger a popup for the client’s details submission, validate them, and finally redirect them to the payment system.

Build technically perfect websites today

Save time, money and nerves by investing in awesome code base early and be prepared when your project needs it.

50% discount applies on purchases in December 2024/January 2025. Happy New Year!