Improve modal UI and refactoring (#10)

* Improve item picker modals * Rename panels to selectors and allow header image to be declared in datasource config * Move non-remote-data constants to src/constants * Reuse ItemPreview * Clean up styles * Lint fixes
Automattic · Aug 23, 2024 · 01eaa59 · 01eaa59
1 parent 447db2a
commit 01eaa59
Showing 47 changed files with 544 additions and 527 deletions.
diff --git a/example/airtable/elden-ring-map/inc/queries/class-airtable-elden-ring-list-maps-query.php b/example/airtable/elden-ring-map/inc/queries/class-airtable-elden-ring-list-maps-query.php
@@ -31,4 +31,8 @@ class AirtableEldenRingListMapsQuery extends QueryContext {
 	public function get_endpoint( $input_variables ): string {
 		return $this->get_datasource()->get_endpoint() . '/' . AirtableEldenRingMapDatasource::MAPS_TABLE;
 	}
+
+	public function get_query_name(): string {
+		return 'List maps';
+	}
 }
diff --git a/example/airtable/elden-ring-map/register.php b/example/airtable/elden-ring-map/register.php
@@ -27,7 +27,7 @@ function register_airtable_elden_ring_map_block() {
 	$list_maps_query       = new AirtableEldenRingListMapsQuery( $elden_ring_datasource );
 
 	ConfigurationLoader::register_block( $block_name, $list_locations_query );
-	ConfigurationLoader::register_list_panel( $block_name, 'List maps', $list_maps_query );
+	ConfigurationLoader::register_list_query( $block_name, $list_maps_query );
 
 	$block_pattern = file_get_contents( __DIR__ . '/inc/patterns/map-pattern.html' );
 	ConfigurationLoader::register_block_pattern( $block_name, 'remote-data-blocks/elden-ring-map/pattern', $block_pattern );

diff --git a/example/airtable/events/inc/queries/class-airtable-list-events-query.php b/example/airtable/events/inc/queries/class-airtable-list-events-query.php
@@ -37,4 +37,8 @@ class AirtableListEventsQuery extends QueryContext {
 			],
 		],
 	];
+
+	public function get_query_name(): string {
+		return 'List events';
+	}
 }
diff --git a/example/airtable/events/register.php b/example/airtable/events/register.php
@@ -25,7 +25,7 @@ function register_airtable_events_block() {
 	$airtable_list_events_query = new AirtableListEventsQuery( $airtable_datasource );
 
 	ConfigurationLoader::register_block( $block_name, $airtable_get_event_query );
-	ConfigurationLoader::register_list_panel( $block_name, 'List events', $airtable_list_events_query );
+	ConfigurationLoader::register_list_query( $block_name, $airtable_list_events_query );
 	ConfigurationLoader::register_loop_block( 'Airtable Event List', $airtable_list_events_query );
 	ConfigurationLoader::register_page( $block_name, 'airtable-event' );
 }

diff --git a/example/rest-api/art-institute/inc/queries/class-art-institute-search-query.php b/example/rest-api/art-institute/inc/queries/class-art-institute-search-query.php
@@ -7,7 +7,7 @@
 
 class ArtInstituteOfChicagoSearchArtQuery extends QueryContext {
 	public array $input_variables = [
-		'query' => [
+		'search_terms' => [
 			'type' => 'string',
 		],
 	];
@@ -50,8 +50,9 @@ public function __construct( HttpDatasourceConfig $datasource ) {
 	}
 
 	public function get_endpoint( $input_variables ): string {
-		$query = 'dogs';
+		$query    = $input_variables['search_terms'];
+		$endpoint = $this->get_datasource()->get_endpoint() . '/search';
 
-		return $this->get_datasource()->get_endpoint() . '/search?q=' . $query;
+		return add_query_arg( [ 'q' => $query ], $endpoint );
 	}
 }
diff --git a/example/rest-api/art-institute/register.php b/example/rest-api/art-institute/register.php
@@ -14,6 +14,6 @@ function register_aic_block() {
 	$search_art_query = new ArtInstituteOfChicagoSearchArtQuery( $aic_datasource );
 
 	ConfigurationLoader::register_block( 'Art Institute of Chicago', $get_art_query );
-	ConfigurationLoader::register_list_panel( 'Art Institute of Chicago', 'List art', $search_art_query );
+	ConfigurationLoader::register_search_query( 'Art Institute of Chicago', $search_art_query );
 }
 add_action( 'register_remote_data_blocks', __NAMESPACE__ . '\\register_aic_block' );
diff --git a/example/shopify/build/blocks/shopify-cart/view.asset.php b/example/shopify/build/blocks/shopify-cart/view.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => '3d5a1b73d3f3bedd31c4', 'type' => 'module');
+<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => '303d0ff50fd1eb79de53', 'type' => 'module');
diff --git a/example/shopify/build/blocks/shopify-cart/view.js b/example/shopify/build/blocks/shopify-cart/view.js
diff --git a/example/shopify/inc/queries/class-shopify-datasource.php b/example/shopify/inc/queries/class-shopify-datasource.php
@@ -3,6 +3,7 @@
 namespace RemoteDataBlocks\Example\Shopify;
 
 use RemoteDataBlocks\Config\HttpDatasource;
+use function plugins_url;
 
 class ShopifyDatasource extends HttpDatasource {
 	public function __construct( private string $access_token ) {}
@@ -17,4 +18,8 @@ public function get_request_headers(): array {
 			'X-Shopify-Storefront-Access-Token' => $this->access_token,
 		];
 	}
+
+	public function get_image_url(): string {
+		return plugins_url( '../../assets/shopify_logo_black.png', __FILE__ );
+	}
 }
diff --git a/example/shopify/inc/queries/class-shopify-search-products-query.php b/example/shopify/inc/queries/class-shopify-search-products-query.php
@@ -63,4 +63,8 @@ public function get_query(): string {
 			}
 		}';
 	}
+
+	public function get_query_name(): string {
+		return 'Search products';
+	}
 }
diff --git a/example/shopify/register.php b/example/shopify/register.php
@@ -29,33 +29,16 @@ function register_shopify_block() {
 	$shopify_get_product_query     = new ShopifyGetProductQuery( $shopify_datasource );
 
 	ConfigurationLoader::register_block( $block_name, $shopify_get_product_query );
-	ConfigurationLoader::register_search_panel( 'Shopify Product', 'Search products', $shopify_search_products_query );
+	ConfigurationLoader::register_search_query( $block_name, $shopify_search_products_query );
 
-	ConfigurationLoader::register_query( $block_name, '__CREATE_CART__', new ShopifyCreateCartMutation( $shopify_datasource ) );
-	ConfigurationLoader::register_query( $block_name, '__ADD_TO_CART__', new ShopifyAddToCartMutation( $shopify_datasource ) );
-	ConfigurationLoader::register_query( $block_name, '__REMOVE_FROM_CART__', new ShopifyRemoveFromCartMutation( $shopify_datasource ) );
+	ConfigurationLoader::register_query( $block_name, new ShopifyCreateCartMutation( $shopify_datasource ) );
+	ConfigurationLoader::register_query( $block_name, new ShopifyAddToCartMutation( $shopify_datasource ) );
+	ConfigurationLoader::register_query( $block_name, new ShopifyRemoveFromCartMutation( $shopify_datasource ) );
 
 	$block_pattern = file_get_contents( __DIR__ . '/inc/patterns/product-teaser.html' );
 	ConfigurationLoader::register_block_pattern( $block_name, 'remote-data-blocks/shopify-product-teaser', $block_pattern, [ 'title' => 'Shopify Product Teaser' ] );
 
 	register_block_type( __DIR__ . '/build/blocks/shopify-cart' );
 	register_block_type( __DIR__ . '/build/blocks/shopify-cart-button' );
-
-	$asset = require __DIR__ . '/build/filters/shopify-list.asset.php';
-
-	wp_enqueue_script(
-		'filter-list-panel-shopify',
-		plugins_url( 'build/filters/shopify-list.js', __FILE__ ),
-		$asset['dependencies'],
-		$asset['version'],
-		true
-	);
-	wp_localize_script(
-		'filter-list-panel-shopify',
-		'SHOPIFY_LIST_PANEL',
-		[
-			'assetPath' => plugins_url( 'assets', __FILE__ ),
-		]
-	);
 }
 add_action( 'register_remote_data_blocks', __NAMESPACE__ . '\\register_shopify_block' );
diff --git a/example/shopify/src/blocks/shopify-cart/data/shopify-cart.ts b/example/shopify/src/blocks/shopify-cart/data/shopify-cart.ts
@@ -25,7 +25,7 @@ export async function createCart(
 ): Promise< Pick< ViewState, 'cartId' | 'checkoutUrl' > > {
 	const results = await apiFetch( state.restUrl, {
 		block_name: state.blockName,
-		query_key: '__CREATE_CART__',
+		query_key: 'RemoteDataBlocks\\Example\\Shopify\\ShopifyCreateCartMutation',
 		query_input: {},
 	} );
 	if ( ! results[ 0 ]?.result?.cart_id?.value || ! results[ 0 ]?.result?.checkout_url?.value ) {
@@ -45,7 +45,7 @@ export async function addToCart(
 ): Promise< string > {
 	const results = await apiFetch( state.restUrl, {
 		block_name: state.blockName,
-		query_key: '__ADD_TO_CART__',
+		query_key: 'RemoteDataBlocks\\Example\\Shopify\\ShopifyAddToCartMutation',
 		query_input: { cart_id: state.cartId, variant_id: context.variantId, quantity },
 	} );
 
@@ -65,7 +65,7 @@ export async function removeFromCart( state: ViewState, context: ViewContext ):
 
 	await apiFetch( state.restUrl, {
 		block_name: state.blockName,
-		query_key: '__REMOVE_FROM_CART__',
+		query_key: 'RemoteDataBlocks\\Example\\Shopify\\ShopifyRemoveFromCartMutation',
 		query_input: { cart_id: state.cartId, line_id: lineId },
 	} );
 }
-Original file line number
+Diff line change
@@ @@ -37,4 +37,8 @@ class AirtableListEventsQuery extends QueryContext { @@
     			],
     		],
     	];
+    	public function get_query_name(): string {
+    		return 'List events';
+    	}
     }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => '3d5a1b73d3f3bedd31c4', 'type' => 'module');
		<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => '303d0ff50fd1eb79de53', 'type' => 'module');