Skip to content

Map Block AMP Compatibility Alternate Approach #13405

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jeffersonrabb merged 18 commits into from
Nov 22, 2019
Merged

Map Block AMP Compatibility Alternate Approach #13405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
dbf9efe
Query param that causes post with Map Blocks to render as complete HT…
jeffersonrabb Sep 3, 2019
de8993d
Increment Map Block counter after render.
jeffersonrabb Sep 3, 2019
e62dc6c
Switch to 1-based map block counter.
jeffersonrabb Sep 3, 2019
6123add
Use XPath to file Map Block instances by class.
jeffersonrabb Sep 3, 2019
0f0e617
Post ID in Map Rendering URLs. Track instances by post to enable disp…
jeffersonrabb Sep 3, 2019
35d3599
Map block ordinal as a static variable rather than global.
jeffersonrabb Sep 30, 2019
8ca36bf
Map block sizing in AMP requests.
jeffersonrabb Oct 1, 2019
9fd9c0f
Rework iframe URL to work correctly in the loop.
jeffersonrabb Oct 1, 2019
eb14dd1
Simplified aspect ratio.
jeffersonrabb Oct 1, 2019
48d8a53
Slight simplification to XPath retrievasl of Map Block container.
jeffersonrabb Oct 1, 2019
17e2cc7
Apply the_content filter to single block page content.
jeffersonrabb Oct 1, 2019
a07566e
Suppress libxml warnings.
jeffersonrabb Oct 1, 2019
4d44e46
Check for DOMDocument class.
jeffersonrabb Oct 1, 2019
0733c86
Remove filter_input, access $_GET object directly.
jeffersonrabb Oct 1, 2019
9c4d794
Remove short array syntax.
jeffersonrabb Nov 21, 2019
f7d08cb
Resolve PHP notice.
jeffersonrabb Nov 21, 2019
1000d17
Avoid calling get_the_ID() unnecessarily, escape the counter.
jeffersonrabb Nov 21, 2019
d9492d1
Comment for the_content filter. Pass post_html by reference to libxml.
jeffersonrabb Nov 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion extensions/blocks/map/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,10 @@ export class Map extends Component {
const { map } = this.state;
const mapEl = this.mapRef.current;
const blockWidth = mapEl.offsetWidth;
const maxHeight = window.innerHeight * 0.8;
const maxHeight =
window.location.search.indexOf( 'map-block-counter' ) > -1
? window.innerHeight
: window.innerHeight * 0.8;
const blockHeight = Math.min( blockWidth * ( 3 / 4 ), maxHeight );
mapEl.style.height = blockHeight + 'px';
map.resize();
Expand Down
92 changes: 92 additions & 0 deletions extensions/blocks/map/map.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,99 @@
function jetpack_map_block_load_assets( $attr, $content ) {
$api_key = Jetpack_Options::get_option( 'mapbox_api_key' );

if ( class_exists( 'Jetpack_AMP_Support' ) && Jetpack_AMP_Support::is_amp_request() ) {
static $map_block_counter = array();

$id = get_the_ID();
if ( ! isset( $map_block_counter[ $id ] ) ) {
$map_block_counter[ $id ] = 0;
}
$map_block_counter[ $id ]++;

$iframe_url = add_query_arg(
array(
'map-block-counter' => absint( $map_block_counter[ $id ] ),
'map-block-post-id' => $id,
),
get_permalink()
);

$placeholder = preg_replace( '/(?<=<div\s)/', 'placeholder ', $content );

return sprintf(
'<amp-iframe src="%s" width="%d" height="%d" layout="responsive" allowfullscreen sandbox="allow-scripts">%s</amp-iframe>',
esc_url( $iframe_url ),
4,
3,
$placeholder
);
}

Jetpack_Gutenberg::load_assets_as_required( 'map' );

return preg_replace( '/<div /', '<div data-api-key="' . esc_attr( $api_key ) . '" ', $content, 1 );
}

/**
* Render a page containing only a single Map block.
*/
function jetpack_map_block_render_single_block_page() {
// phpcs:ignore WordPress.Security.NonceVerification
$map_block_counter = isset( $_GET, $_GET['map-block-counter'] ) ? absint( $_GET['map-block-counter'] ) : null;
// phpcs:ignore WordPress.Security.NonceVerification
$map_block_post_id = isset( $_GET, $_GET['map-block-post-id'] ) ? absint( $_GET['map-block-post-id'] ) : null;

if ( ! $map_block_counter || ! $map_block_post_id ) {
return;
}

/* Create an array of all root-level DIVs that are Map Blocks */
$post = get_post( $map_block_post_id );

if ( ! class_exists( 'DOMDocument' ) ) {
return;
}

$post_html = new DOMDocument();
/** This filter is already documented in core/wp-includes/post-template.php */
$content = apply_filters( 'the_content', $post->post_content );

/* Suppress warnings */
libxml_use_internal_errors( true );
@$post_html->loadHTML( $content ); // phpcs:ignore WordPress.PHP.NoSilencedErrors.Discouraged
libxml_use_internal_errors( false );

$xpath = new DOMXPath( $post_html );
$container = $xpath->query( '//div[ contains( @class, "wp-block-jetpack-map" ) ]' )->item( $map_block_counter - 1 );

/* Check that we have a block matching the counter position */
if ( ! $container ) {
return;
}

/* Compile scripts and styles */
ob_start();

add_filter( 'jetpack_is_amp_request', '__return_false' );

Jetpack_Gutenberg::load_assets_as_required( 'map' );
wp_scripts()->do_items();
wp_styles()->do_items();

add_filter( 'jetpack_is_amp_request', '__return_true' );

$head_content = ob_get_clean();

/* Put together a new complete document containing only the requested block markup and the scripts/styles needed to render it */
$block_markup = $post_html->saveHTML( $container );
$api_key = Jetpack_Options::get_option( 'mapbox_api_key' );
$page_html = sprintf(
'<!DOCTYPE html><head><style>html, body { margin: 0; padding: 0; }</style>%s</head><body>%s</body>',
$head_content,
preg_replace( '/(?<=<div\s)/', 'data-api-key="' . esc_attr( $api_key ) . '" ', $block_markup, 1 )
);
echo $page_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
exit;
}

add_action( 'wp', 'jetpack_map_block_render_single_block_page' );