enable-responsive-image / enable-responsive-image.php

enable-responsive-image.php in Enable Responsive Image 1.7.0, at enable-responsive-image.php

123 lines 3.4 KB

Raw Download Zip

1	<?php
2	/**
3	* Plugin Name: Enable Responsive Image
4	* Description: Adds settings to the Image block to display different images depending on the width of the screen.
5	* Requires at least: 7.0
6	* Requires PHP: 8.0
7	* Version: 1.7.0
8	* Author: Aki Hamano
9	* Author URI: https://github.com/t-hamano
10	* License: GPL2 or later
11	* License URI: https://www.gnu.org/licenses/gpl-2.0.html
12	* Text Domain: enable-responsive-image
13	* @author Aki Hamano
14	* @license GPL-2.0+
15	*/
16
17	if ( ! defined( 'ABSPATH' ) ) {
18	exit;
19	}
20
21	function enable_responsive_image_enqueue_block_editor_assets() {
22	$plugin_path = untrailingslashit( plugin_dir_path( __FILE__ ) );
23	$plugin_url = untrailingslashit( plugin_dir_url( __FILE__ ) );
24	$asset_file = include untrailingslashit( plugin_dir_path( __FILE__ ) ) . '/build/index.asset.php';
25
26	wp_enqueue_script(
27	'enable-responsive-image',
28	$plugin_url . '/build/index.js',
29	$asset_file['dependencies'],
30	filemtime( $plugin_path . '/build/index.js' )
31	);
32
33	wp_localize_script(
34	'enable-responsive-image',
35	'enableResponsiveImage',
36	array(
37	'defaultMediaValue' => (int) apply_filters( 'enable_responsive_image_default_media_value', 600 ),
38	'showPreviewButton' => (bool) apply_filters( 'enable_responsive_image_show_preview_button', true ),
39	)
40	);
41
42	wp_set_script_translations(
43	'enable-responsive-image',
44	'enable-responsive-image',
45	);
46
47	wp_enqueue_style(
48	'enable-responsive-image',
49	$plugin_url . '/build/index.css',
50	array(),
51	filemtime( $plugin_path . '/build/index.css' )
52	);
53	}
54
55	add_action( 'enqueue_block_editor_assets', 'enable_responsive_image_enqueue_block_editor_assets' );
56
57	function enable_responsive_image_render_block_image( $block_content, $block ) {
58	if ( ! isset( $block['attrs']['enableResponsiveImageSources'] ) ) {
59	return $block_content;
60	}
61
62	if ( ! is_array( $block['attrs']['enableResponsiveImageSources'] ) ) {
63	return $block_content;
64	}
65
66	$filtered_sources = array_filter(
67	$block['attrs']['enableResponsiveImageSources'],
68	function ( $source ) {
69	return isset( $source['srcset'], $source['mediaType'], $source['mediaValue'] );
70	}
71	);
72
73	if ( empty( $filtered_sources ) ) {
74	return $block_content;
75	}
76
77	preg_match( '/<img.*?\/>/', $block_content, $matches );
78
79	if ( ! isset( $matches[0] ) ) {
80	return $block_content;
81	}
82
83	$image_tag = $matches[0];
84	$allowed_media_types = array( 'min-width', 'max-width' );
85
86	/**
87	* Filters the default media value (px).
88	*
89	* @since 1.0.0
90	*
91	* @param int $media_value The media value (px). Default is 600.
92	*/
93	$default_media_value = (int) apply_filters( 'enable_responsive_image_default_media_value', 600 );
94
95	$source_tags = '';
96
97	foreach ( $filtered_sources as $source ) {
98	$media_type = in_array( $source['mediaType'], $allowed_media_types, true ) ? $source['mediaType'] : 'max-width';
99	$source_tags .= sprintf(
100	'<source srcset="%1$s" media="(%2$s: %3$dpx)"/>',
101	esc_url( $source['srcset'] ),
102	$media_type,
103	$source['mediaValue'] ? (int) $source['mediaValue'] : $default_media_value,
104	);
105	}
106
107	$new_image_tag = sprintf(
108	'<picture>%1$s%2$s</picture>',
109	$source_tags,
110	$image_tag
111	);
112
113	$block_content = str_replace( $image_tag, $new_image_tag, $block_content );
114
115	return $block_content;
116	}
117
118	// The image block has the same hook with priority 10 and
119	// adds a button element for the Lightbox after the img tag.
120	// This hook must be run after so that this button element is
121	// not wrapped in a picture tag.
122	add_filter( 'render_block_core/image', 'enable_responsive_image_render_block_image', 20, 2 );
123