Version 13 to 14

This migration guide contains migration instructions for:

• eightshift/frontend-libs-tailwind - 1+ --> 2.0.0
• eightshift/frontend-libs - 13-14+ --> 15.0.0
• eightshift/libs - 9+ --> 10.0.0

Note

This release is oriented in reducing the time and load necessary for maintaining the codebase. With this in mind we are discontinuing support for automatic project setup, initial block/components and all other scaffolding.

Eightshift Boilerplate Plugin

We will discontinue the support for https://github.com/infinum/eightshift-boilerplate-plugin and the contents of this repo will be archived. If you need scaffolding for plugin you can find it in the https://github.com/infinum/eightshift-boilerplate repo.

Eightshift Create repo

https://github.com/infinum/eightshift-create repo will be archived. All initial setup will be done manually. We will provide a guide on how to do this in the future.

Eightshift Boilerplate

In the future Eightshift Boilerplate will probably not change in almost any way and it will be an empty setup that you can use or create manually.

We will provide WP-CLI commands that will help you with the setup of the boilerplate.

Eightshift Libs

functions.php file:

before

if (\class_exists(ManifestCache::class)) {
	(new ManifestCache())->setAllCache();
}

if (\class_exists(Main::class)) {
	(new Main($loader->getPrefixesPsr4(), __NAMESPACE__))->register();
}

after

if (\class_exists(Main::class) && \class_exists(ManifestCache::class)) {
	(new ManifestCache())->setAllCache();
	(new Main($loader->getPrefixesPsr4(), __NAMESPACE__))->register();
}

AbstractAdminMenu.php file:

If you are using AbstractAdminMenu class the getViewComponent no longer automatically uses render method, you need to use it manually. Here are the changes you need to do:

before

protected function getViewComponent(): string
{
	return 'admin-theme-options';
}

after

protected function getViewComponent(array $attributes): string
{
	return Helpers::render('admin-theme-options', $attributes);
}

Blocks.php file:

There are significant changes in the backend on how blocks are registered so you can remove some filters. Here are the changes you need to do:

remove

\add_action('init', [$this, 'getBlocksDataFullRaw'], 10);

Blocks>manifest.json file:

You can remove some configuration keys if you are using @infinum/eightshift-frontend-libs package. Here are the changes you should do:

remove

"outputCssGlobally": true,
"outputCssOptimize": true,
"outputCssSelectorName": "esCssVariables",

EnqueueAdmin.php file:

Abstract functions from AbstractEnqueueAdmin have changed:

before

\add_action('login_enqueue_scripts', [$this, 'enqueueStyles']);
\add_action('admin_enqueue_scripts', [$this, 'enqueueStyles'], 50);
\add_action('admin_enqueue_scripts', [$this, 'enqueueScripts']);

after

\add_action('login_enqueue_scripts', [$this, 'enqueueAdminStyles']);
\add_action('admin_enqueue_scripts', [$this, 'enqueueAdminStyles'], 50);
\add_action('admin_enqueue_scripts', [$this, 'enqueueAdminScripts']);

removed functions:

isEnqueueStylesUsed
isEnqueueScriptsUsed

Changed functions

All action callback methods no longer have $hook param.

EnqueueTheme.php file:

Abstract functions from AbstractEnqueueTheme have changed:

before

\add_action('wp_enqueue_scripts', [$this, 'enqueueStyles']);
\add_action('wp_enqueue_scripts', [$this, 'enqueueScripts']);

after

\add_action('wp_enqueue_scripts', [$this, 'enqueueThemeStyles']);
\add_action('wp_enqueue_scripts', [$this, 'enqueueThemeScripts']);

removed functions:

isEnqueueStylesUsed
isEnqueueScriptsUsed

Changed functions

All action callback methods no longer have $hook param.

EnqueueBlocks.php file:

Abstract functions from AbstractEnqueueBlocks have changed:

removed functions:

isEnqueueBlockEditorScriptUsed
isEnqueueBlockEditorStyleUsed
isEnqueueBlockStyleUsed
isEnqueueBlockFrontendScriptUsed
isEnqueueBlockFrontendStyleUsed

Changed functions

All action callback methods no longer have $hook param.

Eightshift Frontend Libs / Tailwind

Eightshift Frontend Libs repo is now dependant on the @infinum/eightshift-ui-components: 3.0.0+ package. You don't need to install it but if you are using any kind of Editor components from the @infinum/eightshift-frontend-libs package you need to install it.

webpack.config.js file:

All application files are now loaded from the src/Blocks>assets folder. And the assets folder is discontinued. You need to move all your files from the assets folder to the src/Blocks>assets folder or create a manual webpack.config.js configuration for application and applicationAdmin entry points. We strongly recommend using the src/Blocks>assets folder.

webpack.config.js should be renamed to webpack.config.mjs

before

const path = require('path');

module.exports = (env, argv) => {

	const projectConfig = {
		config: {
			projectDir: __dirname, // Current project directory absolute path.
			projectPath: 'wp-content/themes/redesign', // Project path relative to project root.
		},
	};

	// Generate Webpack config for this project using options object.
	const project = require('@eightshift/frontend-libs/webpack')(argv.mode, projectConfig);

	return {
		...project,
		entry: {
			...project.entry,
			applicationNoScript: path.join(projectConfig.config.projectDir, '/src/Blocks/assets/application-no-script.js'),
		},
	};
};

after

import path from 'path';
import { fileURLToPath } from 'url';
import { eightshiftConfig } from '@eightshift/frontend-libs/webpack/index.mjs';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default (_, argv) => {
	const projectConfig = {
		config: {
			projectDir: __dirname, // Current project directory absolute path.
			projectPath: 'wp-content/themes/redesign', // Project path relative to project root.
		},
	};

	// Generate Webpack config for this project using options object.
	const config = eightshiftConfig(argv.mode, projectConfig);

	return {
		...config,
		entry: {
			...config.entry,
			applicationNoScript: path.join(projectConfig.config.projectDir, '/src/Blocks/assets/application-no-script.js'),
		},
	};
};