PopupMediaBlock.php — Presto Player 4.3.1

presto-player / inc / Blocks / PopupMediaBlock.php

presto-player / inc / Blocks Last commit date

AudioBlock.php 9 months ago MediaHubBlock.php 9 months ago PopupBlock.php 10 months ago PopupMediaBlock.php 7 months ago PopupTriggerBlock.php 10 months ago ReusableEditBlock.php 9 months ago ReusableVideoBlock.php 2 weeks ago SelfHostedBlock.php 9 months ago VimeoBlock.php 9 months ago YouTubeBlock.php 9 months ago

PopupMediaBlock.php

143 lines

1	<?php
2	/**
3	* Popup Media block.
4	*
5	* @package PrestoPlayer\Blocks
6	*/
7
8	namespace PrestoPlayer\Blocks;
9
10	/**
11	* Popup Media block.
12	*/
13	class PopupMediaBlock {
14
15	/**
16	* Register the block type.
17	*/
18	public function register() {
19	if ( ! file_exists( PRESTO_PLAYER_PLUGIN_DIR . 'src/admin/blocks/blocks/popup-media' ) ) {
20	return;
21	}
22
23	add_action( 'init', array( $this, 'register_block' ) );
24	add_filter( 'enqueue_empty_block_content_assets', array( $this, 'enqueue_empty_block_content_assets' ), 10, 2 );
25	}
26
27	/**
28	* Registers the popup media block with WordPress.
29	*/
30	public function register_block() {
31	register_block_type(
32	PRESTO_PLAYER_PLUGIN_DIR . 'src/admin/blocks/blocks/popup-media',
33	array(
34	'render_callback' => array( $this, 'render_block' ),
35	)
36	);
37	}
38
39	/**
40	* Filters whether to enqueue assets for a block which has no rendered content.
41	*
42	* In WordPress 6.9+, assets enqueued by a block are dequeued again if the block
43	* ultimately renders no content. The popup media block renders its overlay markup
44	* in the footer for accessibility reasons, so its main render callback returns
45	* empty content. Opt this block out so its styles and scripts are preserved.
46	*
47	* @param bool $enqueue Whether to enqueue assets.
48	* @param string $block_name Block name.
49	*
50	* @return bool
51	*/
52	public function enqueue_empty_block_content_assets( $enqueue, $block_name ) {
53	if ( 'presto-player/popup-media' === $block_name ) {
54	return true;
55	}
56
57	return $enqueue;
58	}
59
60	/**
61	* Renders the block content for the popup media block.
62	*
63	* @param array $attributes The block attributes.
64	* @param string $content The block content.
65	* @param WP_Block $block The block instance.
66	* @return void
67	*/
68	public function render_block( $attributes, $content, $block ) {
69	// We are setting this popup id because we need to be able to target the popup overlay.
70	$popup_id = $block->context['presto-player/popup-id'] ?? null;
71
72	$wrapper_attributes = get_block_wrapper_attributes(
73	array(
74	'class' => 'presto-popup__overlay',
75	'aria-label' => esc_attr__( 'Presto Popup', 'presto-player' ),
76	'data-wp-interactive' => 'presto-player/popup',
77	'data-wp-bind--role' => 'state.roleAttribute',
78	'data-wp-bind--aria-modal' => 'state.ariaModal',
79	'data-wp-class--presto-popup--active' => 'state.overlayEnabled',
80	'data-wp-watch' => 'callbacks.setOverlayFocus',
81	'tabindex' => '-1',
82	)
83	);
84
85	add_action(
86	'wp_footer',
87	function () use ( $content, $popup_id, $wrapper_attributes ) {
88	echo $this->render_overlay( $content, $popup_id, $wrapper_attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
89	},
90	99
91	);
92	}
93
94	/**
95	* Renders the block content for the popup media block.
96	* We are rendering the overlay in footer for accessibility reasons.
97	*
98	* @param string $content The block content.
99	* @param int $id The popup ID.
100	* @param string $wrapper_attributes The wrapper attributes.
101	* @return string The rendered HTML for the block.
102	*/
103	public function render_overlay( $content, $id, $wrapper_attributes ) {
104	ob_start();
105	?>
106	<div <?php echo wp_kses_data( $wrapper_attributes ); ?>
107	<?php
108	echo wp_kses_data(
109	wp_interactivity_data_wp_context(
110	array(
111	'id' => $id,
112	'popupList' => array(),
113	)
114	)
115	);
116	?>
117	>
118	<button type="button" aria-label="<?php esc_attr_e( 'Close', 'presto-player' ); ?>" class="presto-popup__close-button" data-wp-on--click="actions.hidePopup">
119	<svg
120	xmlns="http://www.w3.org/2000/svg"
121	viewBox="0 0 24 24"
122	width="24"
123	height="24"
124	aria-hidden="true"
125	focusable="false"
126	fill="white"
127	>
128	<path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"/>
129	</svg>
130	</button>
131	<template data-wp-each="context.popupList" data-wp-watch="callbacks.updatePopupList">
132	<div data-wp-each-key="index" class="presto-popup__content">
133	<?php echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
134	</div>
135	</template>
136	<div data-wp-text="state.screenReaderText" aria-live="polite" aria-atomic="true" class="presto-popup__speak screen-reader-text"></div>
137	<div class="presto-popup__scrim" aria-hidden="true" data-wp-on--click="actions.hidePopup"></div>
138	</div>
139	<?php
140	return ob_get_clean();
141	}
142	}
143