woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Fix the frontend rendering logic for the Pay Later Messaging block

Browse source
This commit is contained in:
Daniel Dudzic 2024-04-10 13:08:56 +02:00
parent 7af2162f1c
commit a3c657c0ab
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
5 changed files with 88 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

3
modules/ppcp-paylater-block/block.json
View file

@ -49,6 +49,5 @@
},
"textdomain": "woocommerce-paypal-payments",
"editorScript": "ppcp-paylater-block",
"editorStyle": "file:./assets/css/edit.css",
"render": "file:./src/PayLaterBlockRender.php"
"editorStyle": "file:./assets/css/edit.css"
}

6
modules/ppcp-paylater-block/services.php
View file

@ -9,10 +9,11 @@ declare(strict_types=1);
namespace WooCommerce\PayPalCommerce\PayLaterBlock;
use WooCommerce\PayPalCommerce\PayLaterBlock\PayLaterBlockRenderer;
use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
return array(
'paylater-block.url' => static function ( ContainerInterface $container ): string {
'paylater-block.url' => static function ( ContainerInterface $container ): string {
/**
* Cannot return false for this path.
*
@ -23,4 +24,7 @@ return array(
dirname( realpath( __FILE__ ), 3 ) . '/woocommerce-paypal-payments.php'
);
},
'paylater-block.renderer' => static function (): PayLaterBlockRenderer {
return new PayLaterBlockRenderer();
},
);

18
modules/ppcp-paylater-block/src/PayLaterBlockModule.php
View file

@ -99,7 +99,23 @@ class PayLaterBlockModule implements ModuleInterface {
*
* @psalm-suppress PossiblyFalseArgument
*/
register_block_type( dirname( realpath( __FILE__ ), 2 ) );
register_block_type(
dirname( realpath( __FILE__ ), 2 ),
array(
'render_callback' => function ( $attributes ) use ( $c ) {
$renderer = $c->get( 'paylater-block.renderer' );
ob_start();
// phpcs:ignore -- No need to escape it, the PayLaterBlockRenderer class is responsible for escaping.
echo $renderer->render(
// phpcs:ignore
$attributes,
// phpcs:ignore
$c
);
return ob_get_clean();
},
)
);
},
20
);

47
modules/ppcp-paylater-block/src/PayLaterBlockRender.php
View file

@ -1,47 +0,0 @@
<?php
/**
* The Pay Later block render callback.
*
* @package WooCommerce\PayPalCommerce\PayLaterBlock
*/
declare(strict_types=1);
namespace WooCommerce\PayPalCommerce\PayLaterBlock;
if ( ! isset( $attributes ) || ! is_array( $attributes ) ) {
return;
}
$html = '<div id="' . esc_attr( $attributes['id'] ?? '' ) . '" class="ppcp-messages" data-partner-attribution-id="Woo_PPCP"></div>';
$processor = new \WP_HTML_Tag_Processor( $html );
if ( $processor->next_tag( 'div' ) ) {
$layout = esc_attr( $attributes['layout'] ) ?? 'text';
if ( 'flex' === $layout ) {
$processor->set_attribute( 'data-pp-style-layout', 'flex' );
$processor->set_attribute( 'data-pp-style-color', esc_attr( $attributes['flexColor'] ) ?? '' );
$processor->set_attribute( 'data-pp-style-ratio', esc_attr( $attributes['flexRatio'] ) ?? '' );
} else {
$processor->set_attribute( 'data-pp-style-layout', 'text' );
$processor->set_attribute( 'data-pp-style-logo-type', esc_attr( $attributes['logo'] ) ?? '' );
$processor->set_attribute( 'data-pp-style-logo-position', esc_attr( $attributes['position'] ) ?? '' );
$processor->set_attribute( 'data-pp-style-text-color', esc_attr( $attributes['color'] ) ?? '' );
$processor->set_attribute( 'data-pp-style-text-size', esc_attr( $attributes['size'] ) ?? '' );
}
if ( ( $attributes['placement'] ?? 'auto' ) !== 'auto' ) {
$processor->set_attribute( 'data-pp-placement', esc_attr( $attributes['placement'] ) );
}
}
$updated_html = (string) $processor;
?>
<div id="ppcp-paylater-message-block" <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>>
<?php
echo $updated_html; // phpcs:ignore -- No need to escape it, all added attributes have been sanitized above.
?>
</div>

65
modules/ppcp-paylater-block/src/PayLaterBlockRenderer.php Normal file
View file

@ -0,0 +1,65 @@
<?php
/**
* Defines the PayLaterBlockRenderer class.
*
* This file is responsible for rendering the Pay Later Messaging block.
*
* @package WooCommerce\PayPalCommerce\PayLaterBlock
*/
declare(strict_types=1);
namespace WooCommerce\PayPalCommerce\PayLaterBlock;
use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
/**
* Class PayLaterBlockRenderer
*/
class PayLaterBlockRenderer {
/**
* Renders the Pay Later Messaging block.
*
* @param array $attributes The block attributes.
* @param ContainerInterface $c The container.
* @return string The rendered HTML.
*/
public function render( array $attributes, ContainerInterface $c ): string {
if ( PayLaterBlockModule::is_block_enabled( $c->get( 'wcgateway.settings.status' ) ) ) {
$html = '<div id="' . esc_attr( $attributes['id'] ?? '' ) . '" class="ppcp-messages" data-partner-attribution-id="Woo_PPCP"></div>';
$processor = new \WP_HTML_Tag_Processor( $html );
if ( $processor->next_tag( 'div' ) ) {
$layout = $attributes['layout'] ?? 'text';
if ( 'flex' === $layout ) {
$processor->set_attribute( 'data-pp-style-layout', 'flex' );
$processor->set_attribute( 'data-pp-style-color', esc_attr( $attributes['flexColor'] ?? '' ) );
$processor->set_attribute( 'data-pp-style-ratio', esc_attr( $attributes['flexRatio'] ?? '' ) );
} else {
$processor->set_attribute( 'data-pp-style-layout', 'text' );
$processor->set_attribute( 'data-pp-style-logo-type', esc_attr( $attributes['logo'] ?? '' ) );
$processor->set_attribute( 'data-pp-style-logo-position', esc_attr( $attributes['position'] ?? '' ) );
$processor->set_attribute( 'data-pp-style-text-color', esc_attr( $attributes['color'] ?? '' ) );
$processor->set_attribute( 'data-pp-style-text-size', esc_attr( $attributes['size'] ?? '' ) );
}
if ( ( $attributes['placement'] ?? 'auto' ) !== 'auto' ) {
$processor->set_attribute( 'data-pp-placement', esc_attr( $attributes['placement'] ) );
}
}
$updated_html = (string) $processor;
return sprintf(
'<div id="ppcp-paylater-message-block" %1$s>%2$s</div>',
wp_kses_data( get_block_wrapper_attributes() ),
$updated_html
);
}
return '';
}
}