From ea794e50b67e5e8242e1dce3dc8a4fc7bddd4012 Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Tue, 3 Dec 2024 10:39:37 -0700 Subject: [PATCH 1/3] Revert changes from 216 --- safe-svg.php | 54 ++++++++++++------------------------ tests/unit/test-safe-svg.php | 6 ++-- 2 files changed, 20 insertions(+), 40 deletions(-) diff --git a/safe-svg.php b/safe-svg.php index 6486b05..256c7fc 100644 --- a/safe-svg.php +++ b/safe-svg.php @@ -444,9 +444,9 @@ public function fix_admin_preview( $response, $attachment, $meta ) { */ public function one_pixel_fix( $image, $attachment_id, $size, $icon ) { if ( get_post_mime_type( $attachment_id ) === 'image/svg+xml' ) { - $dimensions = $this->get_svg_dimensions( $attachment_id, $size ); + $dimensions = $this->svg_dimensions( $attachment_id, $size ); - if ( is_array( $dimensions ) && isset( $dimensions['height'], $dimensions['width'] ) ) { + if ( $dimensions ) { $image[1] = $dimensions['width']; $image[2] = $dimensions['height']; } else { @@ -499,12 +499,23 @@ public function load_custom_admin_style() { */ public function get_image_tag_override( $html, $id, $alt, $title, $align, $size ) { $mime = get_post_mime_type( $id ); + if ( 'image/svg+xml' === $mime ) { - $dimensions = $this->get_svg_dimensions( $id, $size ); + if ( is_array( $size ) ) { + $width = $size[0]; + $height = $size[1]; + // phpcs:ignore WordPress.CodeAnalysis.AssignmentInCondition.Found, Squiz.PHP.DisallowMultipleAssignments.FoundInControlStructure + } elseif ( 'full' === $size && $dimensions = $this->svg_dimensions( $id ) ) { + $width = $dimensions['width']; + $height = $dimensions['height']; + } else { + $width = get_option( "{$size}_size_w", false ); + $height = get_option( "{$size}_size_h", false ); + } - if ( is_array( $dimensions ) && isset( $dimensions['height'], $dimensions['width'] ) ) { - $html = str_replace( 'width="1" ', sprintf( 'width="%s" ', $dimensions['width'] ), $html ); - $html = str_replace( 'height="1" ', sprintf( 'height="%s" ', $dimensions['height'] ), $html ); + if ( $height && $width ) { + $html = str_replace( 'width="1" ', sprintf( 'width="%s" ', $width ), $html ); + $html = str_replace( 'height="1" ', sprintf( 'height="%s" ', $height ), $html ); } else { $html = str_replace( 'width="1" ', '', $html ); $html = str_replace( 'height="1" ', '', $html ); @@ -765,37 +776,6 @@ protected function str_ends_with( $haystack, $needle ) { $len = strlen( $needle ); return 0 === substr_compare( $haystack, $needle, -$len, $len ); } - - /** - * Return custom width or height of the SVG image. - * - * @param int $id Image attachment ID. - * @param string|array $size Size of image. Image size or array of width and height values - * (in that order). Default 'thumbnail'. - * - * @return array|bool Width or height of the SVG image, or false if not found. - */ - protected function get_svg_dimensions( $id, $size ) { - $dimensions = $this->svg_dimensions( $id ); - - if ( is_array( $size ) ) { - $width = $size[0]; - $height = $size[1]; - } elseif ( 'full' === $size && is_array( $dimensions ) && isset( $dimensions['width'], $dimensions['height'] ) ) { - $width = $dimensions['width']; - $height = $dimensions['height']; - } else { - $width = get_option( "{$size}_size_w", false ); - $height = get_option( "{$size}_size_h", false ); - } - - if ( $dimensions ) { - $dimensions['width'] = $width; - $dimensions['height'] = $height; - } - - return $dimensions; - } } } diff --git a/tests/unit/test-safe-svg.php b/tests/unit/test-safe-svg.php index a7b4c56..1272d8d 100644 --- a/tests/unit/test-safe-svg.php +++ b/tests/unit/test-safe-svg.php @@ -275,7 +275,7 @@ public function test_one_pixel_fix() { ); // Test SVG Dimensions - $image_sizes = $this->instance->one_pixel_fix( array(), 1, 'full', false ); + $image_sizes = $this->instance->one_pixel_fix( array(), 1, 'thumbnail', false ); if ( ! empty( $image_sizes ) ) { $image_sizes = array_map( 'intval', $image_sizes ); } @@ -307,8 +307,8 @@ public function test_one_pixel_fix() { } $this->assertSame( array( - 1 => 500, - 2 => 500, + 1 => 600, + 2 => 600, ), $image_sizes ); From 74f6e48fad918ae62092c4ae66e3d0cbf282a34e Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Tue, 3 Dec 2024 10:59:27 -0700 Subject: [PATCH 2/3] Add E2E tests for testing the output of wp_get_attachment_image and get_image_tag --- safe-svg.php | 3 +- tests/cypress/e2e/safe-svg.cy.js | 37 +++++++++++++++++++ tests/cypress/test-plugin/e2e-test-plugin.php | 16 ++++++++ 3 files changed, 54 insertions(+), 2 deletions(-) diff --git a/safe-svg.php b/safe-svg.php index 256c7fc..326399a 100644 --- a/safe-svg.php +++ b/safe-svg.php @@ -504,8 +504,7 @@ public function get_image_tag_override( $html, $id, $alt, $title, $align, $size if ( is_array( $size ) ) { $width = $size[0]; $height = $size[1]; - // phpcs:ignore WordPress.CodeAnalysis.AssignmentInCondition.Found, Squiz.PHP.DisallowMultipleAssignments.FoundInControlStructure - } elseif ( 'full' === $size && $dimensions = $this->svg_dimensions( $id ) ) { + } elseif ( 'full' === $size && $dimensions = $this->svg_dimensions( $id ) ) { // phpcs:ignore WordPress.CodeAnalysis.AssignmentInCondition.Found, Squiz.PHP.DisallowMultipleAssignments.FoundInControlStructure $width = $dimensions['width']; $height = $dimensions['height']; } else { diff --git a/tests/cypress/e2e/safe-svg.cy.js b/tests/cypress/e2e/safe-svg.cy.js index 00e7cb7..9038d18 100644 --- a/tests/cypress/e2e/safe-svg.cy.js +++ b/tests/cypress/e2e/safe-svg.cy.js @@ -105,4 +105,41 @@ describe('Safe SVG Tests', () => { cy.activatePlugin('safe-svg-cypress-optimizer-test-plugin'); cy.createPost('Hello World'); }); + + it('Output of wp_get_attachment_image should use full svg dimensions', () => { + // Activate test plugin. + cy.activatePlugin('safe-svg-cypress-test-plugin'); + + // Visit the home page. + cy.visit('/'); + + // Verify that the SVG images are displayed with the correct dimensions. + cy.get('#thumbnail-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); + cy.get('#medium-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); + cy.get('#large-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); + cy.get('#full-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); + cy.get('#custom-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); + + // Deactivate the test plugin. + cy.deactivatePlugin('safe-svg-cypress-test-plugin'); + }); + + it('Output of get_image_tag should use custom dimensions', () => { + // Activate test plugin. + cy.activatePlugin('safe-svg-cypress-test-plugin'); + + // Visit the home page. + cy.visit('/'); + + // Verify that the SVG images are displayed with the correct dimensions. + // TODO: these are the sizes returned but seems they are not correct. get_image_tag_override needs to be fixed. + cy.get('.size-thumbnail.wp-image-6').should('have.attr', 'width', '150').should('have.attr', 'height', '150'); + cy.get('.size-medium.wp-image-6').should('have.attr', 'width', '300').should('have.attr', 'height', '300'); + cy.get('.size-large.wp-image-6').should('have.attr', 'width', '1024').should('have.attr', 'height', '1024'); + cy.get('.size-full.wp-image-6').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); + cy.get('.size-100x120.wp-image-6').should('have.attr', 'width', '100').should('have.attr', 'height', '100'); + + // Deactivate the test plugin. + cy.deactivatePlugin('safe-svg-cypress-test-plugin'); + }); }); diff --git a/tests/cypress/test-plugin/e2e-test-plugin.php b/tests/cypress/test-plugin/e2e-test-plugin.php index b01810b..0689e06 100644 --- a/tests/cypress/test-plugin/e2e-test-plugin.php +++ b/tests/cypress/test-plugin/e2e-test-plugin.php @@ -21,3 +21,19 @@ function ( $tags ) { return $tags; } ); + +add_action( + 'wp_body_open', + function () { + echo wp_get_attachment_image( 6, 'thumbnail', false, [ 'id' => 'thumbnail-image' ] ); + echo wp_get_attachment_image( 6, 'medium', false, [ 'id' => 'medium-image' ] ); + echo wp_get_attachment_image( 6, 'large', false, [ 'id' => 'large-image' ] ); + echo wp_get_attachment_image( 6, 'full', false, [ 'id' => 'full-image' ] ); + echo wp_get_attachment_image( 6, [ 100, 120 ], false, [ 'id' => 'custom-image' ] ); + echo get_image_tag( 6, '', '', '', 'thumbnail' ); + echo get_image_tag( 6, '', '', '', 'medium' ); + echo get_image_tag( 6, '', '', '', 'large' ); + echo get_image_tag( 6, '', '', '', 'full' ); + echo get_image_tag( 6, '', '', '', [ 100, 120 ] ); + } +); From fab05a2e189471648a9e03a11aa24f382993a6ae Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Tue, 3 Dec 2024 11:15:12 -0700 Subject: [PATCH 3/3] Fix spacing --- safe-svg.php | 4 +- tests/cypress/e2e/safe-svg.cy.js | 76 ++++++++++++++++---------------- 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/safe-svg.php b/safe-svg.php index 326399a..548d869 100644 --- a/safe-svg.php +++ b/safe-svg.php @@ -256,7 +256,7 @@ public function check_for_svg( $file ) { return $file; } - $file_name = isset( $file['name'] ) ? $file['name'] : ''; + $file_name = isset( $file['name'] ) ? $file['name'] : ''; // Allow SVGs to be uploaded when this function runs. add_filter( 'upload_mimes', array( $this, 'allow_svg' ) ); @@ -269,7 +269,7 @@ public function check_for_svg( $file ) { // This is because wp_check_filetype_and_ext() is called multiple times during the upload process. add_filter( 'pre_move_uploaded_file', array( $this, 'pre_move_uploaded_file' ) ); - $type = ! empty( $wp_filetype['type'] ) ? $wp_filetype['type'] : ''; + $type = ! empty( $wp_filetype['type'] ) ? $wp_filetype['type'] : ''; if ( 'image/svg+xml' === $type ) { if ( ! $this->current_user_can_upload_svg() ) { diff --git a/tests/cypress/e2e/safe-svg.cy.js b/tests/cypress/e2e/safe-svg.cy.js index 9038d18..5e033b9 100644 --- a/tests/cypress/e2e/safe-svg.cy.js +++ b/tests/cypress/e2e/safe-svg.cy.js @@ -16,21 +16,21 @@ describe('Safe SVG Tests', () => { }); it('Admin can add SVG block to a post', () => { - cy.uploadMedia('.wordpress-org/icon.svg'); - - cy.createPost( { - title: 'SVG Block Test', - beforeSave: () => { - cy.insertBlock( 'safe-svg/svg-icon' ); - cy.getBlockEditor().find( '.block-editor-media-placeholder' ).contains( 'button', 'Media Library' ).click(); - cy.get( '#menu-item-browse' ).click(); - cy.get( '.attachments-wrapper li:first .thumbnail' ).click(); - cy.get( '.media-modal .media-button-select' ).click(); - }, - } ).then( post => { - cy.visit( `/wp-admin/post.php?post=${post.id}&action=edit` ); - cy.getBlockEditor().find( '.wp-block-safe-svg-svg-icon' ); - } ); + cy.uploadMedia('.wordpress-org/icon.svg'); + + cy.createPost( { + title: 'SVG Block Test', + beforeSave: () => { + cy.insertBlock( 'safe-svg/svg-icon' ); + cy.getBlockEditor().find( '.block-editor-media-placeholder' ).contains( 'button', 'Media Library' ).click(); + cy.get( '#menu-item-browse' ).click(); + cy.get( '.attachments-wrapper li:first .thumbnail' ).click(); + cy.get( '.media-modal .media-button-select' ).click(); + }, + } ).then( post => { + cy.visit( `/wp-admin/post.php?post=${post.id}&action=edit` ); + cy.getBlockEditor().find( '.wp-block-safe-svg-svg-icon' ); + } ); } ); /** @@ -49,8 +49,8 @@ describe('Safe SVG Tests', () => { // Test cy.uploadMedia('tests/cypress/fixtures/custom.svg'); cy.get('#media-items .media-item a.edit-attachment').invoke('attr', 'href').then(editLink => { - cy.visit(editLink); - } ); + cy.visit(editLink); + } ); cy.get('input#attachment_url').invoke('val') .then(url => { cy.request(url) @@ -74,8 +74,8 @@ describe('Safe SVG Tests', () => { cy.uploadMedia('tests/cypress/fixtures/custom.svg'); cy.get('#media-items .media-item a.edit-attachment').invoke('attr', 'href').then(editLink => { - cy.visit( editLink ); - }); + cy.visit( editLink ); + }); cy.get('input#attachment_url').invoke('val') .then(url => { cy.request(url) @@ -110,36 +110,36 @@ describe('Safe SVG Tests', () => { // Activate test plugin. cy.activatePlugin('safe-svg-cypress-test-plugin'); - // Visit the home page. + // Visit the home page. cy.visit('/'); - // Verify that the SVG images are displayed with the correct dimensions. - cy.get('#thumbnail-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); - cy.get('#medium-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); - cy.get('#large-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); - cy.get('#full-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); - cy.get('#custom-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); + // Verify that the SVG images are displayed with the correct dimensions. + cy.get('#thumbnail-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); + cy.get('#medium-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); + cy.get('#large-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); + cy.get('#full-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); + cy.get('#custom-image').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); - // Deactivate the test plugin. - cy.deactivatePlugin('safe-svg-cypress-test-plugin'); + // Deactivate the test plugin. + cy.deactivatePlugin('safe-svg-cypress-test-plugin'); }); it('Output of get_image_tag should use custom dimensions', () => { // Activate test plugin. cy.activatePlugin('safe-svg-cypress-test-plugin'); - // Visit the home page. + // Visit the home page. cy.visit('/'); - // Verify that the SVG images are displayed with the correct dimensions. - // TODO: these are the sizes returned but seems they are not correct. get_image_tag_override needs to be fixed. - cy.get('.size-thumbnail.wp-image-6').should('have.attr', 'width', '150').should('have.attr', 'height', '150'); - cy.get('.size-medium.wp-image-6').should('have.attr', 'width', '300').should('have.attr', 'height', '300'); - cy.get('.size-large.wp-image-6').should('have.attr', 'width', '1024').should('have.attr', 'height', '1024'); - cy.get('.size-full.wp-image-6').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); - cy.get('.size-100x120.wp-image-6').should('have.attr', 'width', '100').should('have.attr', 'height', '100'); + // Verify that the SVG images are displayed with the correct dimensions. + // TODO: these are the sizes returned but seems they are not correct. get_image_tag_override needs to be fixed. + cy.get('.size-thumbnail.wp-image-6').should('have.attr', 'width', '150').should('have.attr', 'height', '150'); + cy.get('.size-medium.wp-image-6').should('have.attr', 'width', '300').should('have.attr', 'height', '300'); + cy.get('.size-large.wp-image-6').should('have.attr', 'width', '1024').should('have.attr', 'height', '1024'); + cy.get('.size-full.wp-image-6').should('have.attr', 'width', '256').should('have.attr', 'height', '256'); + cy.get('.size-100x120.wp-image-6').should('have.attr', 'width', '100').should('have.attr', 'height', '100'); - // Deactivate the test plugin. - cy.deactivatePlugin('safe-svg-cypress-test-plugin'); + // Deactivate the test plugin. + cy.deactivatePlugin('safe-svg-cypress-test-plugin'); }); });