Skip to content

Commit

Permalink
Merge pull request #207 from blockeraai/perf/improvements
Browse files Browse the repository at this point in the history
Performance Improvements 🔥
  • Loading branch information
aliaghdam authored Nov 19, 2024
2 parents bb6187b + f738e21 commit 144db93
Show file tree
Hide file tree
Showing 90 changed files with 2,305 additions and 2,274 deletions.
2 changes: 1 addition & 1 deletion blockera.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* Plugin URI: https://blockera.ai/products/site-builder/
* Description: The Advanced Mode for Block Editor
* Requires at least: 6.6
* Tested up to: 6.6
* Tested up to: 6.7
* Requires PHP: 7.4
* Author: Blockera AI
* Author URI: https://blockera.ai/about/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ public function boot(): void {

$skip = false;

add_filter( 'blockera/wordpress/' . $this->getId() . '/inline-script', [ $this, 'createInlineScript' ] );
add_filter( 'blockera/wordpress/' . $this->getId() . '/inline-script/after', [ $this, 'createInlineScript' ] );
add_filter( 'blockera/wordpress/' . $this->getId() . '/handle/inline-script', [ $this, 'getHandler' ] );

} elseif ( ! blockera_telemetry_opt_in_is_off( 'blockera' ) ) {
Expand Down
91 changes: 69 additions & 22 deletions packages/blockera/php/Providers/EditorAssetsProvider.php
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ public function getId(): string {
*
* @return string the handler name.
*/
public function getHandler():string {
public function getHandler(): string {

return '@blockera/blockera';
}
Expand All @@ -41,8 +41,9 @@ public function getHandler():string {
*/
public function boot(): void {

add_filter( 'blockera/wordpress/' . $this->getId() . '/inline-script', [ $this, 'createInlineScript' ] );
add_filter( 'blockera/wordpress/' . $this->getId() . '/handle/inline-script', [ $this, 'getHandler' ] );
add_filter( 'blockera/wordpress/' . $this->getId() . '/inline-script/before', [ $this, 'beforeInlineScript' ] );
add_filter( 'blockera/wordpress/' . $this->getId() . '/inline-script/after', [ $this, 'afterInlineScript' ] );

$this->app->make(
$this->getId(),
Expand All @@ -63,37 +64,90 @@ public function boot(): void {
}

/**
* Create inline script for blockera editor handler.
* @return string
*/
protected function getEditorObject(): string {

$editor_package_file = blockera_core_config( 'app.root_path' ) . 'vendor/blockera/editor/package.json';

if ( ! file_exists( $editor_package_file ) ) {

return '';
}

ob_start();
require $editor_package_file;
$editor_package = json_decode( ob_get_clean(), true );
$editor_version = str_replace( '.', '_', $editor_package['version'] );

return 'blockeraEditor_' . $editor_version;
}

/**
* Create before inline script for blockera editor handler.
*
* @param string $inline_script the previous inline script.
*
* @hooked 'blockera/wordpress/{$this->getId()}/inline-script'
* @hooked 'blockera/wordpress/{$this->getId()}/inline-script/before'
*
* @throws BindingResolutionException BindingResolutionException to handle errors.
* @return string the inline script for initialize blockera some package's configuration.
*/
public function createInlineScript( string $inline_script ): string {
public function beforeInlineScript( string $inline_script ): string {

if ( ! $this->app instanceof Blockera ) {

return $inline_script;
}

$editor_package_file = blockera_core_config( 'app.root_path' ) . 'vendor/blockera/editor/package.json';
$editor_object = $this->getEditorObject();

if ( ! file_exists( $editor_package_file ) ) {
if ( empty( $editor_object ) ) {

return $inline_script;
}

ob_start();
require $editor_package_file;
$editor_package = json_decode( ob_get_clean(), true );
$editor_version = str_replace( '.', '_', $editor_package['version'] );
$editor_object = 'blockeraEditor_' . $editor_version;

$dynamic_value_bootstrapper = $editor_object . '.coreData.unstableBootstrapServerSideDynamicValueDefinitions(' . wp_json_encode( $this->app->getRegisteredValueAddons( 'dynamic-value', false ) ) . ');';

$script = 'window.onload = () => {
' . $editor_object . '.coreData.unstableBootstrapServerSideEntities(' . wp_json_encode( $this->app->getEntities() ) . ');
' . $editor_object . '.editor.unstableBootstrapServerSideBreakpointDefinitions(' . wp_json_encode( $this->app->getEntity( 'breakpoints' ) ) . ');
' . $editor_object . '.coreData.unstableBootstrapServerSideVariableDefinitions(' . wp_json_encode( $this->app->getRegisteredValueAddons( 'variable', false ) ) . ');
' . $editor_object . '.editor.init();
' . ( blockera_get_experimental( [ 'data', 'dynamicValue' ] ) ? $dynamic_value_bootstrapper : '' ) . '
};';

if ( false !== strpos( $inline_script, $script ) ) {

return $inline_script;
}

return sprintf( '%s%s', $inline_script . PHP_EOL, $script );
}

/**
* Create after inline script for blockera editor handler.
*
* @param string $inline_script the previous inline script.
*
* @hooked 'blockera/wordpress/{$this->getId()}/inline-script/after'
*
* @throws BindingResolutionException BindingResolutionException to handle errors.
* @return string the inline script for initialize blockera some package's configuration.
*/
public function afterInlineScript( string $inline_script ): string {

if ( ! $this->app instanceof Blockera ) {

return $inline_script;
}

$editor_object = $this->getEditorObject();

if ( empty( $editor_object ) ) {

return $inline_script;
}

/**
* Filterable shared block attributes,
* For external developers to extending blockera shared block attributes.
Expand Down Expand Up @@ -124,14 +178,7 @@ function ( string $block_type ) use ( $editor_object, $app ): string {
);

$script = implode( ";\n", $blocks_attributes_scripts ) . '
' . $editor_object . '.editor.unstableRegistrationSharedBlockAttributes(' . wp_json_encode( $shared_block_attributes ) . ');
window.onload = () => {
' . $editor_object . '.coreData.unstableBootstrapServerSideEntities(' . wp_json_encode( $this->app->getEntities() ) . ');
' . $editor_object . '.editor.unstableBootstrapServerSideBreakpointDefinitions(' . wp_json_encode( $this->app->getEntity( 'breakpoints' ) ) . ');
' . $editor_object . '.coreData.unstableBootstrapServerSideVariableDefinitions(' . wp_json_encode( $this->app->getRegisteredValueAddons( 'variable', false ) ) . ');
' . $editor_object . '.editor.init();
' . ( blockera_get_experimental( [ 'data', 'dynamicValue' ] ) ? $dynamic_value_bootstrapper : '' ) . '
};';
' . $editor_object . '.editor.unstableRegistrationSharedBlockAttributes(' . wp_json_encode( $shared_block_attributes ) . ');';

if ( false !== strpos( $inline_script, $script ) ) {

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -245,10 +245,10 @@ describe('Icon Block → Inner Blocks → WP Compatibility', () => {
settings: {
name: 'Base',
id: 'base',
value: '#f9f9f9',
value: '#FFFFFF',
reference: {
type: 'theme',
theme: 'Twenty Twenty-Four',
theme: 'Twenty Twenty-Five',
},
type: 'color',
var: '--wp--preset--color--base',
Expand Down Expand Up @@ -276,7 +276,7 @@ describe('Icon Block → Inner Blocks → WP Compatibility', () => {
value: '#111111',
reference: {
type: 'theme',
theme: 'Twenty Twenty-Four',
theme: 'Twenty Twenty-Five',
},
type: 'color',
var: '--wp--preset--color--contrast',
Expand All @@ -298,69 +298,69 @@ describe('Icon Block → Inner Blocks → WP Compatibility', () => {
});

// change variable
cy.selectValueAddonItem('contrast-2');
cy.selectValueAddonItem('accent-1');

cy.getParentContainer('Text Color').within(() => {
cy.clickValueAddonButton();
});

// change variable
cy.selectValueAddonItem('base-2');
cy.selectValueAddonItem('accent-5');

//
// Check
//
getWPDataObject().then((data) => {
expect('base-2').to.be.equal(
expect('accent-5').to.be.equal(
getSelectedBlock(data, 'iconColor')
);
expect(undefined).to.be.equal(
getSelectedBlock(data, 'customIconColor')
);
expect('#ffffff').to.be.equal(
expect('#FBFAF3').to.be.equal(
getSelectedBlock(data, 'iconColorValue')
);
expect({
settings: {
name: 'Base / Two',
id: 'base-2',
value: '#ffffff',
name: 'Accent 5',
id: 'accent-5',
value: '#FBFAF3',
reference: {
type: 'theme',
theme: 'Twenty Twenty-Four',
theme: 'Twenty Twenty-Five',
},
type: 'color',
var: '--wp--preset--color--base-2',
var: '--wp--preset--color--accent-5',
},
name: 'Base / Two',
name: 'Accent 5',
isValueAddon: true,
valueType: 'variable',
}).to.be.deep.equal(
getSelectedBlock(data, 'blockeraFontColor')
);

expect('contrast-2').to.be.equal(
expect('accent-1').to.be.equal(
getSelectedBlock(data, 'iconBackgroundColor')
);
expect(undefined).to.be.equal(
getSelectedBlock(data, 'customIconBackgroundColor')
);
expect('#636363').to.be.equal(
expect('#FFEE58').to.be.equal(
getSelectedBlock(data, 'iconBackgroundColorValue')
);
expect({
settings: {
name: 'Contrast / Two',
id: 'contrast-2',
value: '#636363',
name: 'Accent 1',
id: 'accent-1',
value: '#FFEE58',
reference: {
type: 'theme',
theme: 'Twenty Twenty-Four',
theme: 'Twenty Twenty-Five',
},
type: 'color',
var: '--wp--preset--color--contrast-2',
var: '--wp--preset--color--accent-1',
},
name: 'Contrast / Two',
name: 'Accent 1',
isValueAddon: true,
valueType: 'variable',
}).to.be.deep.equal(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ describe('Avatar Block → Selectors test', () => {

cy.get('@borderContainer').within(() => {
cy.get('[aria-haspopup="listbox"]').click();
cy.get('li').eq(1).click();
cy.get('div[aria-selected="false"]').eq(1).click();
});
cy.getBlock('core/avatar')
.first()
Expand Down
Loading

0 comments on commit 144db93

Please sign in to comment.