Skip to content
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

Image Editor: Stabilize endpoint #23536

Merged
merged 9 commits into from
Jun 28, 2020
Merged

Image Editor: Stabilize endpoint #23536

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
087a3e8
Update the image editor route to be wp/v2/media/<id>/edit.
TimothyBJacobs Jun 27, 2020
2953c58
Check that mime type is valid.
TimothyBJacobs Jun 27, 2020
ecaa86c
Use request object directly.
TimothyBJacobs Jun 27, 2020
5519045
Include error message in snackbar notice.
TimothyBJacobs Jun 27, 2020
3efc768
Update lib/class-wp-rest-image-editor-controller.php
TimothyBJacobs Jun 27, 2020
37bc7c0
Use the "edit" context in the request for the new media item.
TimothyBJacobs Jun 27, 2020
d8c5273
Slash new attachment data.
TimothyBJacobs Jun 27, 2020
02a2803
Make file type check error message more clear.
TimothyBJacobs Jun 27, 2020
80390a4
Fix file header while we're at it.
TimothyBJacobs Jun 27, 2020
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
35 changes: 22 additions & 13 deletions lib/class-wp-rest-image-editor-controller.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ class WP_REST_Image_Editor_Controller extends WP_REST_Controller {
* @access public
*/
public function __construct() {
$this->namespace = '__experimental';
$this->rest_base = '/image-editor/(?P<media_id>[\d]+)';
$this->namespace = 'wp/v2';
$this->rest_base = 'media';
}

/**
Expand All @@ -36,7 +36,7 @@ public function __construct() {
public function register_routes() {
register_rest_route(
$this->namespace,
$this->rest_base . '/apply',
'/' . $this->rest_base . '/(?P<id>[\d]+)/edit',
array(
array(
'methods' => WP_REST_Server::EDITABLE,
Expand Down Expand Up @@ -84,7 +84,7 @@ public function register_routes() {
* @return true|WP_Error True if the request has read access, WP_Error object otherwise.
*/
public function permission_callback( $request ) {
if ( ! current_user_can( 'edit_post', $request['media_id'] ) ) {
if ( ! current_user_can( 'edit_post', $request['id'] ) ) {
$error = __( 'Sorry, you are not allowed to edit images.', 'gutenberg' );
return new WP_Error( 'rest_cannot_edit_image', $error, array( 'status' => rest_authorization_required_code() ) );
}
Expand All @@ -108,8 +108,7 @@ public function permission_callback( $request ) {
public function apply_edits( $request ) {
require_once ABSPATH . 'wp-admin/includes/image.php';

$params = $request->get_params();
$attachment_id = $params['media_id'];
$attachment_id = $request['id'];

// This also confirms the attachment is an image.
$image_file = wp_get_original_image_path( $attachment_id );
Expand All @@ -120,16 +119,26 @@ public function apply_edits( $request ) {
return new WP_Error( 'rest_unknown_attachment', $error, array( 'status' => 404 ) );
}

$supported_types = array( 'image/jpeg', 'image/png', 'image/gif' );
$mime_type = get_post_mime_type( $request['id'] );
TimothyBJacobs marked this conversation as resolved.
Show resolved Hide resolved
if ( ! in_array( $mime_type, $supported_types, true ) ) {
return new WP_Error(
'rest_cannot_edit_file_type',
__( 'Sorry, you are not allowed to edit file type.', 'gutenberg' ),
TimothyBJacobs marked this conversation as resolved.
Show resolved Hide resolved
array( 'status' => 400 )
);
}

// Check if we need to do anything.
$rotate = 0;
$crop = false;

if ( ! empty( $params['rotation'] ) ) {
if ( ! empty( $request['rotation'] ) ) {
// Rotation direction: clockwise vs. counter clockwise.
$rotate = 0 - (int) $params['rotation'];
$rotate = 0 - (int) $request['rotation'];
}

if ( isset( $params['x'], $params['y'], $params['width'], $params['height'] ) ) {
if ( isset( $request['x'], $request['y'], $request['width'], $request['height'] ) ) {
$crop = true;
}

Expand Down Expand Up @@ -158,10 +167,10 @@ public function apply_edits( $request ) {
if ( $crop ) {
$size = $image_editor->get_size();

$crop_x = round( ( $size['width'] * floatval( $params['x'] ) ) / 100.0 );
$crop_y = round( ( $size['height'] * floatval( $params['y'] ) ) / 100.0 );
$width = round( ( $size['width'] * floatval( $params['width'] ) ) / 100.0 );
$height = round( ( $size['height'] * floatval( $params['height'] ) ) / 100.0 );
$crop_x = round( ( $size['width'] * floatval( $request['x'] ) ) / 100.0 );
$crop_y = round( ( $size['height'] * floatval( $request['y'] ) ) / 100.0 );
$width = round( ( $size['width'] * floatval( $request['width'] ) ) / 100.0 );
$height = round( ( $size['height'] * floatval( $request['height'] ) ) / 100.0 );

$result = $image_editor->crop( $crop_x, $crop_y, $width, $height );

Expand Down
12 changes: 7 additions & 5 deletions packages/block-library/src/image/image-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
MenuGroup,
MenuItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';

Expand Down Expand Up @@ -177,7 +177,7 @@ export default function ImageEditor( {
}

apiFetch( {
path: `__experimental/image-editor/${ id }/apply`,
path: `wp/v2/media/${ id }/edit`,
method: 'POST',
data: attrs,
} )
Expand All @@ -188,10 +188,12 @@ export default function ImageEditor( {
height: height && width ? width / aspect : undefined,
} );
} )
.catch( () => {
.catch( ( error ) => {
createErrorNotice(
__(
'Unable to perform the image modification. Please check your media storage.'
sprintf(
/* translators: 1. Error message */
__( 'Could not edit image. %s' ),
error.message
),
{
id: 'image-editing-error',
Expand Down