Skip to main content

Version 13 to 14

This migration guide contains migration instructions for:

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();
}

getViewComponent method​

The getViewComponent no longer automatically uses render method, so if it is used in the project you need to render 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);
}

classnames method​

classnames helper method is deprecated and should be replaced with clsx, the syntax remains the same.

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.

Getting manifest data​

Every component and block now have $manifest variable available by default.

This means you can remove every instance of $manifest = Helpers::getManifestByDir(__DIR__);

If you have a partial or need to get a manifest above in project file-tree e.g. $manifest = Helpers::getManifestByDir(dirname(__DIR__, 1)); you can replace the method with $manifest = Helpers::getBlock('{block-name}'); for a block or $manifest = Helpers::getComponent('{component-name}'); for a component.

Also if you need global manifest it can be retrieved with getSettings method from Helpers class e.g. $globalManifest = Helpers::getSettings();

PHPStan linter will report errors for the undefined $manifest variable in all the modified files. This can be addressed by adding '#^Variable \$manifest might not be defined\.#' to ignoreErrors attribute of phpstan.neon.dist file.

getProjectPaths method​

If you had a Helpers::getProjectPaths('projectRoot') replace it with Helpers::getProjectPaths('root');

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'),
		},
	};
};
Made with ❤️ by Infinum team.