External Media: Implementation (#15717)

* external-media: Add /list endpoint

* external-media-endpoint: update wpcom path

* Add file to phpcs whitelist

* external-media: propagate `search` term to the end

* fse: add `/copy` external media endpoint

* external-media: whitelist `list` endpoint args

* external-media: add `connection` endpoint

* external-media: tidy code

* external-media: fix connection endpoint path

* externa-media: add text domain to translations

* external-image: fix typo

* external-media: adjust `media` copy arg

* Add some comments

* Properly pass on WP_Error responses

* Properly pass on response status

* Use 1.1 endpoint to establish connection

* Handle Google file names

* External Media: Add Editor integration (#15721)

* add external media code

* proper translation calls

* css classes scoping

* include styles in build

* removed extra file

* remove interpolation

* extract google photos logo

* collocate icons

* use external package for auth modal

* use named export for JetpackLogo

* rewrite MediaItem to functional

* rewrite PexelsMedia to functional

* extract some code

* extract CopyingMedia

* rewrite MediaBrowser to functional

* split google photos auth and media handling

* rewrite the auth to functional

* translation

* remove auth remains from media

* rewrite google photos to functional

* use simpler method to resize modal within Gutenberg constraints

* align notices

* update whitespace

* Document grandfathered class

Props @jeherve

See #15721 (comment)

* add missing dependency in hook

* remove hook dependency

* Use Gutenberg base styles

Props @jeherve.

* Add request external access package

* Move requestExternalAccess to external deps

* fix load more photos from google photos

* Fix load more for pexels

* Simplify prop

* external-media: fix pexels searcher

* external-media: handling seacher button

* Use updated connection endpoint.

* external-media: fix google albums section

* external-media: set mediaType acording to prop

Co-authored-by: Konstantin Obenland <obenland@gmx.de>
Co-authored-by: retrofox <rdsuarez@gmail.com>

* external-media: restore appying google filters

* external-media: whitelist `filter` endpoint arg

* Improve sanitization/validation for copy endpoint

* Separate out more media upload steps

* Further split out API methods

* API updates to work on dotcom

* change filter priority so it plays nice with AMP plugin

* Keep parsing responses when not using wpcomFetch

* Remove erroneous typeof

* Remove Pexels example query prone to unexpected results

* Avoid duplocate content headers

Setting the content type here  duplicates the string when passing `data`, which in return prevents the API from parsing the JSON payload.

* Remove unused scss vars

* Use color var for image placeholder bg

* Run editor.scss through Prettier

* Export with memo call instead of naming the func twice

* Rewrap long comments

* External Media: Fix Pexels search markup (#15853)

* Use type=search on the search input for pexels
* Add aria-label to search input

* Fix display of insert button in IE 11

* External Media: Use ul and li for media items with checkbox role to be in line with the core media library interaction (#15850)

* Add NavigableMenu component for arrow key use and trapping focus. Adds missing aria states from toggle button. (#15856)

* Only show External MEdia to connected users

* Improve error handling in list endpoint

* Make error message translatable

* Simplify Favorites label

* Use keyCode over which

* Fix invalid DOM property warning

* Reuse existing translation strings

* Only replace button for image blocks

* External Media: Improve modal elements focus for better a11y (#15868)

* Add media type information

Needed for media-text block.

* [not verified] Be more specific about button margins

Co-authored-by: Konstantin Obenland <obenland@gmx.de>
Co-authored-by: Marek Hrabe <marekhrabe@me.com>
Co-authored-by: Michael P. Pfeiffer <michael@cssconf.eu>
Co-authored-by: Bart <bartlomiej.kalisz@gmail.com>
Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>

bin/phpcs-whitelist.js

@@ -24,6 +24,7 @@ module.exports = [
 	'_inc/lib/class-jetpack-wizard.php',
 	'_inc/lib/components.php',
 	'_inc/lib/core-api/class.jetpack-core-api-site-endpoints.php',
+	'_inc/lib/core-api/wpcom-endpoints/class-wpcom-rest-api-v2-endpoint-external-media.php',
 	'_inc/lib/core-api/wpcom-endpoints/class-wpcom-rest-api-v2-endpoint-instagram-gallery.php',
 	'_inc/lib/core-api/wpcom-endpoints/class-wpcom-rest-api-v2-endpoint-podcast-player.php',
 	'_inc/lib/core-api/wpcom-endpoints/class-wpcom-rest-api-v2-endpoint-resolve-redirect.php',

extensions/editor.js

@@ -5,6 +5,7 @@ import './shared/public-path';
 import './shared/block-category';
 import './shared/plan-upgrade-notification';
 import './shared/stripe-connection-notification';
+import './shared/external-media';
 import analytics from '../_inc/client/lib/analytics';
 
 // @TODO Please make a shared analytics solution and remove this!

extensions/shared/external-media/constants.js

@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+
+import { __ } from '@wordpress/i18n';
+
+export const SOURCE_WORDPRESS = 'wordpress';
+export const SOURCE_GOOGLE_PHOTOS = 'google_photos';
+export const SOURCE_PEXELS = 'pexels';
+export const PATH_RECENT = 'recent';
+export const PATH_ROOT = '/';
+export const PATH_OPTIONS = [
+	{
+		value: PATH_RECENT,
+		label: __( 'Recent Photos', 'jetpack' ),
+	},
+	{
+		value: PATH_ROOT,
+		label: __( 'Albums', 'jetpack' ),
+	},
+];
+export const GOOGLE_PHOTOS_CATEGORIES = [
+	{
+		value: '',
+		/* translators: category of images */
+		label: __( 'All categories', 'jetpack' ),
+	},
+	{
+		value: 'animals',
+		/* translators: category of images */
+		label: __( 'Animals', 'jetpack' ),
+	},
+	{
+		value: 'arts',
+		/* translators: category of images */
+		label: __( 'Arts', 'jetpack' ),
+	},
+	{
+		value: 'birthdays',
+		/* translators: category of images */
+		label: __( 'Birthdays', 'jetpack' ),
+	},
+	{
+		value: 'cityscapes',
+		/* translators: category of images */
+		label: __( 'Cityscapes', 'jetpack' ),
+	},
+	{
+		value: 'crafts',
+		/* translators: category of images */
+		label: __( 'Crafts', 'jetpack' ),
+	},
+	{
+		value: 'fashion',
+		/* translators: category of images */
+		label: __( 'Fashion', 'jetpack' ),
+	},
+	{
+		value: 'food',
+		/* translators: category of images */
+		label: __( 'Food', 'jetpack' ),
+	},
+	{
+		value: 'flowers',
+		/* translators: category of images */
+		label: __( 'Flowers', 'jetpack' ),
+	},
+	{
+		value: 'gardens',
+		/* translators: category of images */
+		label: __( 'Gardens', 'jetpack' ),
+	},
+	{
+		value: 'holidays',
+		/* translators: category of images */
+		label: __( 'Holidays', 'jetpack' ),
+	},
+	{
+		value: 'houses',
+		/* translators: category of images */
+		label: __( 'Houses', 'jetpack' ),
+	},
+	{
+		value: 'landmarks',
+		/* translators: category of images */
+		label: __( 'Landmarks', 'jetpack' ),
+	},
+	{
+		value: 'landscapes',
+		/* translators: category of images */
+		label: __( 'Landscapes', 'jetpack' ),
+	},
+	{
+		value: 'night',
+		/* translators: category of images */
+		label: __( 'Night', 'jetpack' ),
+	},
+	{
+		value: 'people',
+		/* translators: category of images */
+		label: __( 'People', 'jetpack' ),
+	},
+	{
+		value: 'pets',
+		/* translators: category of images */
+		label: __( 'Pets', 'jetpack' ),
+	},
+	{
+		value: 'selfies',
+		/* translators: category of images */
+		label: __( 'Selfies', 'jetpack' ),
+	},
+	{
+		value: 'sport',
+		/* translators: category of images */
+		label: __( 'Sport', 'jetpack' ),
+	},
+	{
+		value: 'travel',
+		/* translators: category of images */
+		label: __( 'Travel', 'jetpack' ),
+	},
+	{
+		value: 'weddings',
+		/* translators: category of images */
+		label: __( 'Weddings', 'jetpack' ),
+	},
+];
+export const PEXELS_EXAMPLE_QUERIES = [
+	'mountain',
+	'ocean',
+	'river',
+	'clouds',
+	'pattern',
+	'abstract',
+	'sky',
+];