← All changes | extensions/blocks/slideshow/slideshow.php +22 -183 13.5.2 → 16.3-a.1 View file →

		@@ -9,10 +9,13 @@
9	9
10	10	namespace Automattic\Jetpack\Extensions\Slideshow;
11	11
12	12	use Automattic\Jetpack\Blocks;
13		-use Jetpack_Gutenberg;
14	13
	14	+if ( ! defined( 'ABSPATH' ) ) {
	15	+ exit( 0 );
	16	+}
	17	+
15	18	/**
16	19	* Registers the block for use in Gutenberg
17	20	* This is done via an action so that we can disable
18	21	* registration if we need to.
		@@ -19,9 +22,12 @@
19	22	*/
20	23	function register_block() {
21	24	Blocks::jetpack_register_block(
22	25	__DIR__,
23		- array( 'render_callback' => __NAMESPACE__ . '\load_assets' )
	26	+ array(
	27	+ 'render_callback' => __NAMESPACE__ . '\load_assets',
	28	+ 'render_email_callback' => __NAMESPACE__ . '\render_email',
	29	+ )
24	30	);
25	31	}
26	32	add_action( 'init', __NAMESPACE__ . '\register_block' );
27	33
		@@ -27,8 +33,11 @@
27	33
28	34	/**
29	35	* Slideshow block registration/dependency declaration.
30	36	*
	37	+ * The heavy render implementation lives in render.php and is only loaded when
	38	+ * the block is actually rendered, keeping it out of the eager front-end path.
	39	+ *
31	40	* @param array $attr Array containing the slideshow block attributes.
32	41	* @param string $content String containing the slideshow block content.
33	42	*
34	43	* @return string
		@@ -33,193 +42,23 @@
33	42	*
34	43	* @return string
35	44	*/
36	45	function load_assets( $attr, $content ) {
37		- Jetpack_Gutenberg::load_assets_as_required( __DIR__ );
38		- if ( Blocks::is_amp_request() ) {
39		- return render_amp( $attr );
40		- }
41		- return $content;
	46	+ require_once __DIR__ . '/render.php';
	47	+ return render( $attr, $content );
42	48	}
43	49
44	50	/**
45		- * Render slideshow block for AMP
	51	+ * Render slideshow block for email.
46	52	*
47		- * @param array $attr Array containing the slideshow block attributes.
	53	+ * @since 15.0
48	54	*
	55	+ * @param string $block_content The original block HTML content.
	56	+ * @param array $parsed_block The parsed block data including attributes.
	57	+ * @param object $rendering_context Email rendering context.
	58	+ *
49	59	* @return string
50	60	*/
51		-function render_amp( $attr ) {
52		- if ( empty( $attr['ids'] ) ) {
53		- return '';
54		- }
55		-
56		- static $wp_block_jetpack_slideshow_id = 0;
57		- ++$wp_block_jetpack_slideshow_id;
58		-
59		- $ids = $attr['ids'];
60		- $autoplay = empty( $attr['autoplay'] ) ? false : true;
61		- $extras = array(
62		- 'wp-amp-block',
63		- $autoplay ? 'wp-block-jetpack-slideshow__autoplay' : null,
64		- $autoplay ? 'wp-block-jetpack-slideshow__autoplay-playing' : null,
65		- );
66		- $classes = Blocks::classes( Blocks::get_block_feature( __DIR__ ), $attr, $extras );
67		-
68		- return sprintf(
69		- '<div class="%1$s" id="wp-block-jetpack-slideshow__%2$d"><div class="wp-block-jetpack-slideshow_container swiper-container">%3$s%4$s%5$s</div></div>',
70		- esc_attr( $classes ),
71		- absint( $wp_block_jetpack_slideshow_id ),
72		- amp_carousel( $attr, $wp_block_jetpack_slideshow_id ),
73		- $autoplay ? autoplay_ui( $wp_block_jetpack_slideshow_id ) : '',
74		- render_paginator( $ids, $wp_block_jetpack_slideshow_id )
75		- );
76		-}
77		-
78		-/**
79		- * Generate amp-carousel markup
80		- *
81		- * @param array $attr Array of block attributes.
82		- * @param int $block_ordinal The ordinal number of the block, used in unique ID.
83		- *
84		- * @return string amp-carousel markup.
85		- */
86		-function amp_carousel( $attr, $block_ordinal ) {
87		- $ids = empty( $attr['ids'] ) ? array() : $attr['ids'];
88		- $first_image = wp_get_attachment_metadata( $ids[0] );
89		- $delay = empty( $attr['delay'] ) ? 3 : absint( $attr['delay'] );
90		- $autoplay = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
91		- $width = empty( $first_image['width'] ) ? 800 : $first_image['width'];
92		- $height = empty( $first_image['height'] ) ? 600 : $first_image['height'];
93		- return sprintf(
94		- '<amp-carousel width="%1$d" height="%2$d" layout="responsive" type="slides" data-next-button-aria-label="%3$s" data-prev-button-aria-label="%4$s" controls loop %5$s id="wp-block-jetpack-slideshow__amp-carousel__%6$s" on="slideChange:wp-block-jetpack-slideshow__amp-pagination__%6$s.toggle(index=event.index, value=true)">%7$s</amp-carousel>',
95		- esc_attr( $width ),
96		- esc_attr( $height ),
97		- esc_attr__( 'Next Slide', 'jetpack' ),
98		- esc_attr__( 'Previous Slide', 'jetpack' ),
99		- $autoplay ? 'autoplay delay=' . esc_attr( $delay * 1000 ) : '',
100		- absint( $block_ordinal ),
101		- implode( '', slides( $ids, $width, $height ) )
102		- );
103		-}
104		-
105		-/**
106		- * Generate array of slides markup
107		- *
108		- * @param array $ids Array of image ids.
109		- * @param int $width Width of the container.
110		- * @param int $height Height of the container.
111		- *
112		- * @return array Array of slides markup.
113		- */
114		-function slides( $ids = array(), $width = 400, $height = 300 ) {
115		- return array_map(
116		- function ( $id ) use ( $width, $height ) {
117		- $caption = wp_get_attachment_caption( $id );
118		- $figcaption = $caption ? sprintf(
119		- '<figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">%s</figcaption>',
120		- wp_kses_post( $caption )
121		- ) : '';
122		- $image = wp_get_attachment_image(
123		- $id,
124		- array( $width, $height ),
125		- false,
126		- array(
127		- 'class' => 'wp-block-jetpack-slideshow_image',
128		- 'object-fit' => 'contain',
129		- )
130		- );
131		- return sprintf(
132		- '<div class="wp-block-jetpack-slideshow_slide"><figure>%s%s</figure></div>',
133		- $image,
134		- $figcaption
135		- );
136		- },
137		- $ids
138		- );
139		-}
140		-
141		-/**
142		- * Render blocks paginator section
143		- *
144		- * @param array $ids Array of image ids.
145		- * @param int $block_ordinal The ordinal number of the block, used in unique ID.
146		- *
147		- * @return array Array of bullets markup.
148		- */
149		-function render_paginator( $ids = array(), $block_ordinal = 0 ) {
150		- $total = count( $ids );
151		-
152		- if ( $total < 6 ) {
153		- return bullets( $ids, $block_ordinal );
154		- }
155		-
156		- return sprintf(
157		- '<div class="swiper-pagination-simple">%s / %s</div>',
158		- absint( $block_ordinal ),
159		- absint( $total )
160		- );
161		-}
162		-
163		-/**
164		- * Generate array of bullets markup
165		- *
166		- * @param array $ids Array of image ids.
167		- * @param int $block_ordinal The ordinal number of the block, used in unique ID.
168		- *
169		- * @return array Array of bullets markup.
170		- */
171		-function bullets( $ids = array(), $block_ordinal = 0 ) {
172		- $buttons = array_map(
173		- function ( $index ) {
174		- $aria_label = sprintf(
175		- /* translators: %d: Slide number. */
176		- __( 'Go to slide %d', 'jetpack' ),
177		- absint( $index + 1 )
178		- );
179		- return sprintf(
180		- '<button option="%d" class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="%s" %s></button>',
181		- absint( $index ),
182		- esc_attr( $aria_label ),
183		- 0 === $index ? 'selected' : ''
184		- );
185		- },
186		- array_keys( $ids )
187		- );
188		-
189		- return sprintf(
190		- '<amp-selector id="wp-block-jetpack-slideshow__amp-pagination__%1$d" class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-custom amp-pagination" on="select:wp-block-jetpack-slideshow__amp-carousel__%1$d.goToSlide(index=event.targetOption)" layout="container">%2$s</amp-selector>',
191		- absint( $block_ordinal ),
192		- implode( '', $buttons )
193		- );
194		-}
195		-
196		-/**
197		- * Generate autoplay play/pause UI.
198		- *
199		- * @param int $block_ordinal The ordinal number of the block, used in unique ID.
200		- *
201		- * @return string Autoplay UI markup.
202		- */
203		-function autoplay_ui( $block_ordinal = 0 ) {
204		- $block_id = sprintf(
205		- 'wp-block-jetpack-slideshow__%d',
206		- absint( $block_ordinal )
207		- );
208		- $amp_carousel_id = sprintf(
209		- 'wp-block-jetpack-slideshow__amp-carousel__%d',
210		- absint( $block_ordinal )
211		- );
212		- $autoplay_pause = sprintf(
213		- '<a aria-label="%s" class="wp-block-jetpack-slideshow_button-pause" role="button" on="tap:%s.toggleAutoplay(toggleOn=false),%s.toggleClass(class=wp-block-jetpack-slideshow__autoplay-playing,force=false)"></a>',
214		- esc_attr__( 'Pause Slideshow', 'jetpack' ),
215		- esc_attr( $amp_carousel_id ),
216		- esc_attr( $block_id )
217		- );
218		- $autoplay_play = sprintf(
219		- '<a aria-label="%s" class="wp-block-jetpack-slideshow_button-play" role="button" on="tap:%s.toggleAutoplay(toggleOn=true),%s.toggleClass(class=wp-block-jetpack-slideshow__autoplay-playing,force=true)"></a>',
220		- esc_attr__( 'Play Slideshow', 'jetpack' ),
221		- esc_attr( $amp_carousel_id ),
222		- esc_attr( $block_id )
223		- );
224		- return $autoplay_pause . $autoplay_play;
	61	+function render_email( $block_content, array $parsed_block, $rendering_context ) {
	62	+ require_once __DIR__ . '/render.php';
	63	+ return render_email_implementation( $block_content, $parsed_block, $rendering_context );
225	64	}