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

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