Skip to content

Commit

Permalink
perf: improved the registeration unstable breakpoints location to opt…
Browse files Browse the repository at this point in the history 
…imized performance
  • Loading branch information
@rezaelahidev
rezaelahidev committed Nov 12, 2024
1 parent d03041e commit f4f346f
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 60 deletions.
100 changes: 70 additions & 30 deletions packages/blockera/php/Providers/EditorAssetsProvider.php
View file
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 @@ -123,22 +177,8 @@ function ( string $block_type ) use ( $editor_object, $app ): string {
apply_filters( 'blockera/assets/provider/inline-script/register/3rd-party-blocks/attributes', [] )
);

$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 : '' ) . '
};';

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

return $inline_script;
}

return sprintf( '%s%s', $inline_script . PHP_EOL, $script );
return implode( ";\n", $blocks_attributes_scripts ) . '
' . $editor_object . '.editor.unstableRegistrationSharedBlockAttributes(' . wp_json_encode( $shared_block_attributes ) . ');';
}

/**
Expand Down
21 changes: 2 additions & 19 deletions packages/editor/js/style-engine/components/state-style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import { select } from '@wordpress/data';
import type { MixedElement } from 'react';
import { applyFilters } from '@wordpress/hooks';
import { useId, useMemo, useState, useEffect } from '@wordpress/element';
import { useId, useMemo } from '@wordpress/element';

/**
* Blockera dependencies
Expand Down Expand Up @@ -80,24 +80,7 @@ export const StateStyle = (
);

const { getBreakpoints } = select('blockera/editor');

const [breakpoints, setBreakpoints] = useState([]);

// Because we registering breakpoints after loaded all assets in front-end pages,
// We should in each interval time, try to set breakpoints into native state.
// FIXME: in this useEffect is performance bottleneck! please implements infrastructure to able remove it.
useEffect(() => {
const intervalId = setInterval(() => {
if (!breakpoints.length) {
setBreakpoints(getBreakpoints());
}
}, 1000);

return () => {
clearInterval(intervalId);
};
// eslint-disable-next-line
}, []);
const breakpoints = getBreakpoints();

return Object.entries(breakpoints).map(
([, breakpoint]: [string, BreakpointTypes], index: number): any => {
Expand Down
37 changes: 26 additions & 11 deletions packages/wordpress/php/AssetsLoader.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,12 +157,20 @@ function ( array $asset ): void {
);

/**
* This filter for extendable inline script from internal or third-party developers.
* This filter for extendable before inline script from internal or third-party developers.
*
* @hook 'blockera/wordpress/{$this->id}/inline-script'
* @hook 'blockera/wordpress/{$this->id}/inline-script/before'
* @since 1.0.0
*/
$inline_script = apply_filters( 'blockera/wordpress/' . $this->id . '/inline-script', '' );
$before_inline_script = apply_filters( 'blockera/wordpress/' . $this->id . '/inline-script/before', '' );

/**
* This filter for extendable after inline script from internal or third-party developers.
*
* @hook 'blockera/wordpress/{$this->id}/inline-script/after'
* @since 1.0.0
*/
$after_inline_script = apply_filters( 'blockera/wordpress/' . $this->id . '/inline-script/after', '' );

/**
* This filter for change handle name for inline script from internal or third-party developers.
Expand All @@ -172,17 +180,24 @@ function ( array $asset ): void {
*/
$handle_inline_script = apply_filters( 'blockera/wordpress/' . $this->id . '/handle/inline-script', '' );

if ( empty( $inline_script ) || empty( $handle_inline_script ) ) {
if ( !empty( $before_inline_script ) && !empty( $handle_inline_script ) ) {

return;
// blockera server side before scripts.
wp_add_inline_script(
$handle_inline_script,
$before_inline_script,
'before'
);
}

// blockera server side definitions.
wp_add_inline_script(
$handle_inline_script,
$inline_script,
'after'
);
if ( !empty( $after_inline_script ) && !empty( $handle_inline_script ) ) {

// blockera server side before scripts.
wp_add_inline_script(
$handle_inline_script,
$after_inline_script,
);
}
}

/**
Expand Down

0 comments on commit f4f346f

Please sign in to comment.