start updating picture element support for new structure

modules/images/picture-element/load.php → plugins/webp-uploads/picture-element.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Module Name: Picture Element
+ * Add Picture Element support
  * Description: Use <picture> element when image has more than one mime type.
  * Experimental: No
  *
@@ -15,15 +15,15 @@
  *
  * @param string $content The content to be filtered.
  */
-function wrap_images_in_picture_element( $content ) {
+function webp_uplaods_wrap_images_in_picture_element( $content ) {
 	$pattern = '/(<img[^>]+>)/';
 	$images  = preg_match_all( $pattern, $content, $matches );
 	if ( $images ) {
 		foreach ( $matches[0] as $image ) {
 			// Wrap WordPress images where we can extract an attachment id.
 			if ( preg_match( '/wp-image-([0-9]+)/i', $image, $class_id ) ) {
 				$attachment_id = absint( $class_id[1] );
-				$new_image     = wrap_image_in_picture( $image, $attachment_id );
+				$new_image     = webp_uploads_wrap_image_in_picture( $image, $attachment_id );
 				if ( false !== $new_image ) {
 					$content = str_replace( $image, $new_image, $content );
 				}
@@ -33,7 +33,9 @@ function wrap_images_in_picture_element( $content ) {
 
 	return $content;
 }
-add_filter( 'the_content', 'wrap_images_in_picture_element' );
+if ( webp_uploads_picture_element_enabled() ) {
+	add_filter( 'the_content', 'webp_uplaods_wrap_images_in_picture_element' );
+}
 
 /**
  * Wrap an image tag in a picture element.
@@ -45,7 +47,7 @@ function wrap_images_in_picture_element( $content ) {
  *
  * @return string The new image tag.
  */
-function wrap_image_in_picture( $image, $attachment_id ) {
+function webp_uploads_wrap_image_in_picture( $image, $attachment_id ) {
 	$image_meta              = wp_get_attachment_metadata( $attachment_id );
 	$original_file_mime_type = get_post_mime_type( $attachment_id );
 	if ( false === $original_file_mime_type ) {
@@ -123,8 +125,18 @@ function( $mime_type ) use ( $enabled_mime_types ) {
 	remove_filter( 'wp_calculate_image_srcset_meta', '__return_false' );
 
 	return sprintf(
-		'<picture>%s %s</picture>',
+		'<picture class=%s>%s %s</picture>',
+		'wp-picture-' . $attachment_id,
 		$picture_sources,
 		$original_image_without_srcset
 	);
 }
+
+/**
+ * Helper function to check if the webp_uploads_picture_element_enabled option is enabled.
+ *
+ * @since n.e.x.t
+ */
+function webp_uploads_get_picture_element_enabled() {
+	return get_option( 'webp_uploads_use_picture_element', false );
+}

plugins/webp-uploads/settings.php

@@ -26,6 +26,16 @@ function webp_uploads_register_media_settings_field(): void {
 			'show_in_rest' => false,
 		)
 	);
+	// Add a setting to use the picture element.
+	register_setting(
+		'media',
+		'webp_uploads_use_picture_element',
+		array(
+			'type'         => 'boolean',
+			'default'      => false,
+			'show_in_rest' => false,
+		)
+	);
 }
 add_action( 'init', 'webp_uploads_register_media_settings_field' );
 
@@ -34,7 +44,7 @@ function webp_uploads_register_media_settings_field(): void {
  *
  * @since 1.0.0
  */
-function webp_uploads_add_media_settings_field(): void {
+function webp_uploads_add_media_settings_fields(): void {
 	// Add settings field.
 	add_settings_field(
 		'perflab_generate_webp_and_jpeg',
@@ -44,49 +54,57 @@ function webp_uploads_add_media_settings_field(): void {
 		is_multisite() ? 'default' : 'uploads',
 		array( 'class' => 'perflab-generate-webp-and-jpeg' )
 	);
+
+	// Add settings field.
+	add_settings_field(
+		'webp_uploads_use_picture_element',
+		__( 'Picture Element', 'webp-uploads' ),
+		'webp_uploads_use_picture_element_callback',
+		'media',
+		is_multisite() ? 'default' : 'uploads',
+		array( 'class' => 'webp-uploads-use-picture-element' )
+	);
 }
-add_action( 'admin_init', 'webp_uploads_add_media_settings_field' );
+add_action( 'admin_init', 'webp_uploads_add_media_settings_fields' );
 
 /**
  * Renders the settings field for the 'perflab_generate_webp_and_jpeg' setting.
  *
  * @since 1.0.0
  */
 function webp_uploads_generate_webp_jpeg_setting_callback(): void {
-	if ( ! is_multisite() ) {
-		?>
-			</td>
-			<td class="td-full">
-		<?php
-	}
+
 	?>
+	<tr><td colspan="2" class="td-full">
 		<label for="perflab_generate_webp_and_jpeg">
 			<input name="perflab_generate_webp_and_jpeg" type="checkbox" id="perflab_generate_webp_and_jpeg" aria-describedby="perflab_generate_webp_and_jpeg_description" value="1"<?php checked( '1', get_option( 'perflab_generate_webp_and_jpeg' ) ); ?> />
 			<?php esc_html_e( 'Generate JPEG files in addition to WebP', 'webp-uploads' ); ?>
 		</label>
 		<p class="description" id="perflab_generate_webp_and_jpeg_description"><?php esc_html_e( 'Enabling JPEG in addition to WebP can improve compatibility, but will effectively double the filesystem storage use of your images.', 'webp-uploads' ); ?></p>
+	</td></tr>
 	<?php
 }
 
 /**
- * Adds custom styles to hide specific elements in media settings.
+ * Renders the settings field for the 'webp_uploads_use_picture_element' setting.
  *
  * @since 1.0.0
  */
-function webp_uploads_media_setting_style(): void {
-	if ( is_multisite() ) {
-		return;
-	}
+function webp_uploads_use_picture_element_callback(): void {
+
+
 	?>
-	<style>
-		.form-table .perflab-generate-webp-and-jpeg th,
-		.form-table .perflab-generate-webp-and-jpeg td:not(.td-full) {
-			display: none;
-		}
-	</style>
+		<tr><td colspan="2" class="td-full">
+			<label for="webp_uploads_use_picture_element">
+			<input name="webp_uploads_use_picture_element" type="checkbox" id="webp_uploads_use_picture_element" aria-describedby="webp_uploads_use_picture_element_description" value="1"<?php checked( '1', get_option( 'webp_uploads_use_picture_element' ) ); ?> />
+			<?php esc_html_e( 'Use Picture Element', 'webp-uploads' ); ?>
+		</label>
+		<p class="description" id="webp_uploads_use_picture_element_description"><?php esc_html_e( 'Picture element serves AVIF or WebP with a fallback to JPEG handled by the browser automatically.', 'webp-uploads' ); ?></p>
+		</td></tr>
+
 	<?php
 }
-add_action( 'admin_head-options-media.php', 'webp_uploads_media_setting_style' );
+
 
 /**
  * Adds a settings link to the plugin's action links.