Add upstream
This commit is contained in:
@@ -0,0 +1,98 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders as expected 1`] = `
|
||||
<Gallery
|
||||
galleryRef={
|
||||
Object {
|
||||
"current": null,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Row
|
||||
key="0"
|
||||
>
|
||||
<Column
|
||||
key="0"
|
||||
>
|
||||
0
|
||||
</Column>
|
||||
</Row>
|
||||
<Row
|
||||
key="1"
|
||||
>
|
||||
<Column
|
||||
key="0"
|
||||
>
|
||||
1
|
||||
</Column>
|
||||
</Row>
|
||||
<Row
|
||||
key="2"
|
||||
>
|
||||
<Column
|
||||
key="0"
|
||||
>
|
||||
2
|
||||
</Column>
|
||||
<Column
|
||||
key="1"
|
||||
>
|
||||
3
|
||||
</Column>
|
||||
<Column
|
||||
key="2"
|
||||
>
|
||||
4
|
||||
</Column>
|
||||
<Column
|
||||
key="3"
|
||||
>
|
||||
5
|
||||
</Column>
|
||||
</Row>
|
||||
<Row
|
||||
key="3"
|
||||
>
|
||||
<Column
|
||||
key="0"
|
||||
>
|
||||
6
|
||||
</Column>
|
||||
<Column
|
||||
key="1"
|
||||
>
|
||||
7
|
||||
</Column>
|
||||
</Row>
|
||||
<Row
|
||||
key="4"
|
||||
>
|
||||
<Column
|
||||
key="0"
|
||||
>
|
||||
8
|
||||
</Column>
|
||||
<Column
|
||||
key="1"
|
||||
>
|
||||
9
|
||||
10
|
||||
</Column>
|
||||
</Row>
|
||||
<Row
|
||||
key="5"
|
||||
>
|
||||
<Column
|
||||
key="0"
|
||||
>
|
||||
11
|
||||
12
|
||||
</Column>
|
||||
<Column
|
||||
key="1"
|
||||
>
|
||||
13
|
||||
</Column>
|
||||
</Row>
|
||||
</Gallery>
|
||||
`;
|
||||
@@ -0,0 +1,30 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ratiosToMosaicRows transforms as expected 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
1,
|
||||
],
|
||||
Array [
|
||||
1,
|
||||
],
|
||||
Array [
|
||||
1,
|
||||
1,
|
||||
1,
|
||||
1,
|
||||
],
|
||||
Array [
|
||||
1,
|
||||
1,
|
||||
],
|
||||
Array [
|
||||
1,
|
||||
2,
|
||||
],
|
||||
Array [
|
||||
2,
|
||||
1,
|
||||
],
|
||||
]
|
||||
`;
|
||||
@@ -0,0 +1,171 @@
|
||||
<?php //phpcs:ignore WordPress.Files.FileName.InvalidClassFileName
|
||||
|
||||
/**
|
||||
* Tiled Gallery block. Depends on the Photon module.
|
||||
*
|
||||
* @since 6.9.0
|
||||
*
|
||||
* @package Jetpack
|
||||
*/
|
||||
|
||||
/**
|
||||
* Jetpack Tiled Gallery Block class
|
||||
*
|
||||
* @since 7.3
|
||||
*/
|
||||
class Jetpack_Tiled_Gallery_Block {
|
||||
/* Values for building srcsets */
|
||||
const IMG_SRCSET_WIDTH_MAX = 2000;
|
||||
const IMG_SRCSET_WIDTH_MIN = 600;
|
||||
const IMG_SRCSET_WIDTH_STEP = 300;
|
||||
|
||||
/**
|
||||
* Register the block
|
||||
*/
|
||||
public static function register() {
|
||||
jetpack_register_block(
|
||||
'jetpack/tiled-gallery',
|
||||
array(
|
||||
'render_callback' => array( __CLASS__, 'render' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Tiled gallery block registration
|
||||
*
|
||||
* @param array $attr Array containing the block attributes.
|
||||
* @param string $content String containing the block content.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public static function render( $attr, $content ) {
|
||||
Jetpack_Gutenberg::load_assets_as_required( 'tiled-gallery' );
|
||||
|
||||
$is_squareish_layout = self::is_squareish_layout( $attr );
|
||||
|
||||
if ( preg_match_all( '/<img [^>]+>/', $content, $images ) ) {
|
||||
/**
|
||||
* This block processes all of the images that are found and builds $find and $replace.
|
||||
*
|
||||
* The original img is added to the $find array and the replacement is made and added
|
||||
* to the $replace array. This is so that the same find and replace operations can be
|
||||
* made on the entire $content.
|
||||
*/
|
||||
$find = array();
|
||||
$replace = array();
|
||||
|
||||
foreach ( $images[0] as $image_html ) {
|
||||
if (
|
||||
preg_match( '/data-width="([0-9]+)"/', $image_html, $img_height )
|
||||
&& preg_match( '/data-height="([0-9]+)"/', $image_html, $img_width )
|
||||
&& preg_match( '/src="([^"]+)"/', $image_html, $img_src )
|
||||
) {
|
||||
// Drop img src query string so it can be used as a base to add photon params
|
||||
// for the srcset.
|
||||
$src_parts = explode( '?', $img_src[1], 2 );
|
||||
$orig_src = $src_parts[0];
|
||||
$orig_height = absint( $img_height[1] );
|
||||
$orig_width = absint( $img_width[1] );
|
||||
|
||||
// Because URLs are already "photon", the photon function used short-circuits
|
||||
// before ssl is added. Detect ssl and add is if necessary.
|
||||
$is_ssl = ! empty( $src_parts[1] ) && false !== strpos( $src_parts[1], 'ssl=1' );
|
||||
|
||||
if ( ! $orig_width || ! $orig_height || ! $orig_src ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$srcset_parts = array();
|
||||
if ( $is_squareish_layout ) {
|
||||
$min_width = min( self::IMG_SRCSET_WIDTH_MIN, $orig_width, $orig_height );
|
||||
$max_width = min( self::IMG_SRCSET_WIDTH_MAX, $orig_width, $orig_height );
|
||||
|
||||
for ( $w = $min_width; $w <= $max_width; $w = min( $max_width, $w + self::IMG_SRCSET_WIDTH_STEP ) ) {
|
||||
$srcset_src = add_query_arg(
|
||||
array(
|
||||
'resize' => $w . ',' . $w,
|
||||
'strip' => 'all',
|
||||
),
|
||||
$orig_src
|
||||
);
|
||||
if ( $is_ssl ) {
|
||||
$srcset_src = add_query_arg( 'ssl', '1', $srcset_src );
|
||||
}
|
||||
$srcset_parts[] = esc_url( $srcset_src ) . ' ' . $w . 'w';
|
||||
if ( $w >= $max_width ) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$min_width = min( self::IMG_SRCSET_WIDTH_MIN, $orig_width );
|
||||
$max_width = min( self::IMG_SRCSET_WIDTH_MAX, $orig_width );
|
||||
|
||||
for ( $w = $min_width; $w <= $max_width; $w = min( $max_width, $w + self::IMG_SRCSET_WIDTH_STEP ) ) {
|
||||
$srcset_src = add_query_arg(
|
||||
array(
|
||||
'strip' => 'all',
|
||||
'w' => $w,
|
||||
),
|
||||
$orig_src
|
||||
);
|
||||
if ( $is_ssl ) {
|
||||
$srcset_src = add_query_arg( 'ssl', '1', $srcset_src );
|
||||
}
|
||||
$srcset_parts[] = esc_url( $srcset_src ) . ' ' . $w . 'w';
|
||||
if ( $w >= $max_width ) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( ! empty( $srcset_parts ) ) {
|
||||
$srcset = 'srcset="' . esc_attr( implode( ',', $srcset_parts ) ) . '"';
|
||||
|
||||
$find[] = $image_html;
|
||||
$replace[] = str_replace( '<img', '<img ' . $srcset, $image_html );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( ! empty( $find ) ) {
|
||||
$content = str_replace( $find, $replace, $content );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter the output of the Tiled Galleries content.
|
||||
*
|
||||
* @module tiled-gallery
|
||||
*
|
||||
* @since 6.9.0
|
||||
*
|
||||
* @param string $content Tiled Gallery block content.
|
||||
*/
|
||||
return apply_filters( 'jetpack_tiled_galleries_block_content', $content );
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines whether a Tiled Gallery block uses square or circle images (1:1 ratio)
|
||||
*
|
||||
* Layouts are block styles and will be available as `is-style-[LAYOUT]` in the className
|
||||
* attribute. The default (rectangular) will be omitted.
|
||||
*
|
||||
* @param {Array} $attr Attributes key/value array.
|
||||
* @return {boolean} True if layout is squareish, otherwise false.
|
||||
*/
|
||||
private static function is_squareish_layout( $attr ) {
|
||||
return isset( $attr['className'] )
|
||||
&& (
|
||||
'is-style-square' === $attr['className']
|
||||
|| 'is-style-circle' === $attr['className']
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
( defined( 'IS_WPCOM' ) && IS_WPCOM )
|
||||
|| class_exists( 'Jetpack_Photon' ) && Jetpack::is_module_active( 'photon' )
|
||||
) {
|
||||
Jetpack_Tiled_Gallery_Block::register();
|
||||
}
|
||||
Reference in New Issue
Block a user