Skip to content

Commit

Permalink
Merge pull request #238 from 10up/fix/revert-216
Browse files Browse the repository at this point in the history 
Revert changes done in #216
  • Loading branch information
@dkotter
dkotter authored Dec 5, 2024
2 parents 661151b + fab05a2 commit 13777ce
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 61 deletions.
57 changes: 18 additions & 39 deletions safe-svg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) );
Expand All @@ -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() ) {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -499,12 +499,22 @@ 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];
} 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 {
$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 );
Expand Down Expand Up @@ -765,37 +775,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;
}
}
}

Expand Down
75 changes: 56 additions & 19 deletions tests/cypress/e2e/safe-svg.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
} );
} );

/**
Expand All @@ -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)
Expand All @@ -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)
Expand Down Expand Up @@ -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');
});
});
16 changes: 16 additions & 0 deletions tests/cypress/test-plugin/e2e-test-plugin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ] );
}
);
6 changes: 3 additions & 3 deletions tests/unit/test-safe-svg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}
Expand Down Expand Up @@ -307,8 +307,8 @@ public function test_one_pixel_fix() {
}
$this->assertSame(
array(
1 => 500,
2 => 500,
1 => 600,
2 => 600,
),
$image_sizes
);
Expand Down

0 comments on commit 13777ce

Please sign in to comment.