Skip to content

BeAPI/beapi-frontend-framework

Folders and files

NameName
Last commit message
Last commit date

Latest commit

c44ee24 · Feb 24, 2025
Feb 20, 2024
Sep 26, 2022
Oct 14, 2024
Jun 28, 2024
Oct 14, 2024
Feb 18, 2025
Feb 18, 2025
May 31, 2024
Feb 18, 2025
Dec 4, 2021
Jul 26, 2018
Feb 8, 2024
Aug 1, 2022
Jul 1, 2024
May 1, 2020
Dec 13, 2022
Apr 24, 2023
Jun 6, 2022
May 7, 2024
Aug 5, 2022
Jun 28, 2024
Jun 24, 2022
Aug 5, 2022
Feb 4, 2025
Mar 24, 2023
Feb 13, 2025
May 31, 2022
Aug 29, 2022
Aug 5, 2022
Aug 2, 2021
May 31, 2022
Feb 6, 2025
Feb 5, 2025

Repository files navigation

Be API FrontEnd Framework

Be API Github Banner

Maintenance

What is BFF ?

Be API Frontend Framework (or BFF) is a WordPress theme boilerplate designed to assist you in launching your own WordPress theme using modern tools.

Requirements

Composer

You need composer to autoload all your classes from the inc folder.

Use the beapi/composer-scaffold-theme package that add it automatically to the composer.json file. You can add it yourself like this :

    "autoload": {
        "psr-4": {
            "BEA\\Theme\\Framework\\": "content/themes/framework/inc/"
        }
    }

Autoload

The autoload is based on psr-4 and handled by composer.

Node.js

You need the latest stable version of Node.js.

Installation

Download the latest release of BFF here and extract the zip archive into your themes WordPress's folder.

|____wp-admin
|____wp-content
| |____plugins
| |____themes
| | |____beapi-frontend-framework
| |____uploads
|____wp-includes

Of course, you can rename beapi-frontend-framework to define your WordPress theme's name.

Next, go to your theme folder (in the following example, I didn't rename beapi-frontend-framework) with your favorite Term software.

cd wp-content/themes/beapi-frontend-framework

Then install node dependencies with Yarn.

yarn

Alternatively, you can use NPM.

npm install

Configuration

The configurations files are in config directory.

Webpack

You can find the common Webpack settings file in webpack.common.js. For development mode purpose, you can edit webpack.dev.js file and for production mode, you can edit webpack.prod.js. You also have the loaders in loaders.js file and Webpack's plugin in plugins.js file.

How to use BFF ?

After installing dependencies, you can run some commands which are explained below.

Start with Browser Sync

BFF is configured to work with lando. If you have a .lando.yml file in your project's root, set the path to your file in the browsersync.config.js file.

let fileContents = fs.readFileSync('../../../../.lando.yml', 'utf8')

Then, run the following command from the theme :

yarn start

BrowserSync will proxy your lando'server based on the name defined in your .lando.yml.

Build

yarn build

Bundle report

You can launch a bundle report with the following command :

yarn bundle-report

WordPress Editor (Gutenberg)

Customize blocks

The bff_editor_custom_settings filter allow you to customize blocks styles and variations. For example:

add_filter( 'bff_editor_custom_settings', 'customize_editor_settings', 10, 1 );
function customize_editor_settings( $settings ) {
	// Disable all block styles for Separator block
	$settings[ 'disableAllBlocksStyles' ] = [ 'core/separator' ];

	// Disable specific block style for Button block
	$settings[ 'disabledBlocksStyles' ]   = [ 'core/button' => [ 'outline' ] ];

	// Allow only YouTube variation for Embed block
	$settings[ 'allowedBlocksVariations' ] = [ 'core/embed' => [ 'youtube' ] ];

	return $settings;
}