-
Notifications
You must be signed in to change notification settings - Fork 802
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add: Jetpack App as a new upload media extension (#34179)
* Add: jetpack app media * changelog * update the QR Code url * Improve empty state * demo time * demo time * Remove the loader * Add images * Add JetpackAppIcon * Add PluginBasePath to the editor initial state * Update the app-media endpoint to use after attribute * Updates to the modal to match design * Fixes * Order by date. * Add nice animation when the image gets added. * Update the URL. * Only allow the new jetpack media to be added if the Jetpack Experimental blocks is set to true. * Pull only every 2 seconds instead of every one * Bring back the close button * Minor endpoint fixes * Extract useInterval into its own file. * Extract useInterval into its own file. * only display one notice at a time * Insert first media that is uploaded * Update the app images * Add recoleta font * Update the use the app icon * More fixes * Update images * Remove get-blog-id file * add useEffect hook when adding only 1 image * Combine css to be in the same section * Update the css to use variables and simply the line-height and letter spacing. * Only load font when experimental block is set. * More future proof removal of the jetpack app media * Use experimental variation * Update to use next-version Co-authored-by: Jeremy Herve <[email protected]> * Update to use next-version Co-authored-by: Jeremy Herve <[email protected]> * Remoce comment Co-authored-by: Jeremy Herve <[email protected]> * Update to use template litterals everywhere for included image Co-authored-by: Jeremy Herve <[email protected]> * Add getJetpackBlocksVariation * Use getJetpackBlocksVariation * Update comment * Fix notice overlap * Fix js notice * changelog * Remove alt text since it is image is more decorative * Add postId to the QR code * Updates to images to fix missing * bump version * Use requestAnimationFrame vs setInterval --------- Co-authored-by: Jeremy Herve <[email protected]>
- Loading branch information
Showing
19 changed files
with
645 additions
and
18 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
projects/js-packages/shared-extension-utils/changelog/add-app-upload-media
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: minor | ||
Type: added | ||
|
||
Adds new getJetpackBlocksVariation function |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
projects/js-packages/shared-extension-utils/src/get-jetpack-blocks-variation.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import getJetpackData from './get-jetpack-data'; | ||
/** | ||
* Returns the jetpack block variation that is defined on the backend. | ||
* | ||
* @returns {?string} options are ['production', 'beta', 'experimental'] | ||
*/ | ||
export default function getJetpackBlocksVariation() { | ||
const data = getJetpackData(); | ||
return data?.blocks_variation ?? 'production'; | ||
} |
184 changes: 184 additions & 0 deletions
184
.../jetpack/_inc/lib/core-api/wpcom-endpoints/class-wpcom-rest-api-v2-endpoint-app-media.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,184 @@ | ||
<?php | ||
/** | ||
* REST API endpoint for the media uploaded by the Jetpack app. | ||
* | ||
* @package automattic/jetpack | ||
* @since $$next-version$$ | ||
*/ | ||
|
||
/** | ||
* Media uploaded by the Jetpack app helper API. | ||
* | ||
* @since $$next-version$$ | ||
*/ | ||
class WPCOM_REST_API_V2_Endpoint_App_Media extends WP_REST_Controller { | ||
|
||
/** | ||
* Constructor. | ||
*/ | ||
public function __construct() { | ||
$this->namespace = 'wpcom/v2'; | ||
$this->rest_base = 'app-media'; | ||
|
||
add_action( 'rest_api_init', array( $this, 'register_routes' ) ); | ||
} | ||
|
||
/** | ||
* Registers the routes for external media. | ||
*/ | ||
public function register_routes() { | ||
register_rest_route( | ||
$this->namespace, | ||
$this->rest_base, | ||
array( | ||
'methods' => WP_REST_Server::READABLE, | ||
'callback' => array( $this, 'get_media' ), | ||
'permission_callback' => array( $this, 'permission_callback' ), | ||
'args' => array( | ||
'number' => array( | ||
'description' => __( 'Number of media items in the request', 'jetpack' ), | ||
'type' => 'number', | ||
'default' => 20, | ||
'required' => false, | ||
'sanitize_callback' => 'absint', | ||
|
||
), | ||
'page_handle' => array( | ||
'type' => 'number', | ||
'required' => false, | ||
'sanitize_callback' => 'absint', | ||
|
||
), | ||
'after' => array( | ||
'description' => __( 'Timestamp since the media was uploaded', 'jetpack' ), | ||
'type' => 'number', | ||
'default' => 0, | ||
'required' => true, | ||
'sanitize_callback' => 'absint', | ||
), | ||
), | ||
) | ||
); | ||
} | ||
|
||
/** | ||
* Checks if a given request has access to external media libraries. | ||
*/ | ||
public function permission_callback() { | ||
return current_user_can( 'upload_files' ); | ||
} | ||
|
||
/** | ||
* Sanitization callback for media parameter. | ||
* | ||
* @param array $param Media parameter. | ||
* @return true|\WP_Error | ||
*/ | ||
public function sanitize_media( $param ) { | ||
$param = $this->prepare_media_param( $param ); | ||
|
||
return rest_sanitize_value_from_schema( $param, $this->media_schema ); | ||
} | ||
|
||
/** | ||
* Validation callback for media parameter. | ||
* | ||
* @param array $param Media parameter. | ||
* @return true|\WP_Error | ||
*/ | ||
public function validate_media( $param ) { | ||
$param = $this->prepare_media_param( $param ); | ||
return rest_validate_value_from_schema( $param, $this->media_schema, 'media' ); | ||
} | ||
|
||
/** | ||
* Decodes guid json and sets parameter defaults. | ||
* | ||
* @param array $param Media parameter. | ||
* @return array | ||
*/ | ||
private function prepare_media_param( $param ) { | ||
foreach ( $param as $key => $item ) { | ||
if ( ! empty( $item['guid'] ) ) { | ||
$param[ $key ]['guid'] = json_decode( $item['guid'], true ); | ||
} | ||
|
||
if ( empty( $param[ $key ]['caption'] ) ) { | ||
$param[ $key ]['caption'] = ''; | ||
} | ||
if ( empty( $param[ $key ]['title'] ) ) { | ||
$param[ $key ]['title'] = ''; | ||
} | ||
} | ||
|
||
return $param; | ||
} | ||
|
||
/** | ||
* Retrieves media items from external libraries. | ||
* | ||
* @param \WP_REST_Request $request Full details about the request. | ||
* @return array|\WP_Error|mixed | ||
*/ | ||
public function get_media( \WP_REST_Request $request ) { | ||
$params = $request->get_params(); | ||
$number = $params['number']; | ||
|
||
$query_args = array( | ||
'post_type' => 'attachment', | ||
'post_status' => 'inherit', | ||
'number' => $number, | ||
'date_query' => array( | ||
'after' => gmdate( DATE_RSS, intval( $params['after'] ) ), | ||
), | ||
'paged' => $params['page_handle'], | ||
'author' => get_current_user_id(), | ||
'orderby' => 'date', | ||
); | ||
$media_query = new WP_Query( $query_args ); | ||
$response = $this->format_response( $media_query ); | ||
|
||
wp_reset_postdata(); | ||
return $response; | ||
} | ||
/** | ||
* Formats api the response. | ||
* | ||
* @param \WP_Query $media_query Media query. | ||
*/ | ||
private function format_response( $media_query ) { | ||
$response = array(); | ||
$response['media'] = array(); | ||
while ( $media_query->have_posts() ) { | ||
$media_query->the_post(); | ||
$response['media'][] = $this->format_item( $media_query->post ); | ||
} | ||
$response['found'] = $media_query->found_posts; | ||
$response['meta'] = array( 'next_page' => $media_query->paged + 1 ); | ||
return $response; | ||
} | ||
/** | ||
* Formats a single item. | ||
* | ||
* @param \WP_Post $item Media item. | ||
*/ | ||
private function format_item( $item ) { | ||
return array( | ||
'ID' => $item->ID, | ||
'url' => get_permalink( $item ), | ||
'date' => get_date_from_gmt( $item->post_date_gmt ), | ||
'name' => get_the_title( $item ), | ||
'file' => basename( wp_get_attachment_image_url( $item->ID, 'full' ) ), | ||
'title' => get_the_title( $item ), | ||
'guid' => get_the_guid( $item ), | ||
'type' => get_post_mime_type( $item ), | ||
'caption' => '', | ||
'thumbnails' => array( | ||
'thumbnail' => wp_get_attachment_image_url( $item->ID, 'thumbnail' ), | ||
'large' => wp_get_attachment_image_url( $item->ID, 'full' ), | ||
), | ||
); | ||
} | ||
} | ||
|
||
wpcom_rest_api_v2_load_plugin( 'WPCOM_REST_API_V2_Endpoint_App_Media' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: minor | ||
Type: enhancement | ||
|
||
Subject: A new way to upload media via the Jetpack App |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.