From c1b5a9fec4be4b32358dd5827df64ca10e17a861 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 21 Jan 2026 15:46:56 +0000 Subject: [PATCH 1/8] Initial plan From 4c30c1bcaa158fafe0274a9905cd13721f241814 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 21 Jan 2026 15:53:16 +0000 Subject: [PATCH 2/8] Complete HTTP data source tutorial with missing sections Co-authored-by: maxschmeling <112691+maxschmeling@users.noreply.github.com> --- docs/tutorials/http.md | 22 ++++++++++++++++ package-lock.json | 58 ++++++++---------------------------------- 2 files changed, 32 insertions(+), 48 deletions(-) diff --git a/docs/tutorials/http.md b/docs/tutorials/http.md index 8defec65..5493e436 100644 --- a/docs/tutorials/http.md +++ b/docs/tutorials/http.md @@ -21,3 +21,25 @@ In code, we'll define a query using the data source we just created. Follow the ```php $data_source = HttpDataSource::from_uuid( '{{ Data source UUID }}' ); ``` + +Replace `{{ Data source UUID }}` with the UUID you copied from step 7. + +The query should append the zip code input variable to the data source endpoint, and define the output schema to map the API response fields to display in your block. Once registered, your block will be available in the block editor. + +## Insert the block + +Create or edit a page or post, then using the Block Inserter, search for "Zip Code" (or whatever name you gave your block). + +After inserting the block, you'll be prompted to enter a zip code. Enter a valid US zip code (e.g., "90210") to see the location data appear in the block. + +## Patterns and styling + +You can use patterns to create a consistent, reusable layout for your remote data. You can read more about [patterns](../extending/block-patterns.md). + +Remote data blocks can be styled using the block editor's style settings, `theme.json`, or custom stylesheets. See the [example child theme](https://github.com/Automattic/remote-data-blocks/tree/trunk/example/templates/theme) for more details. + +## Code reference + +You can also configure HTTP integrations with code. These integrations appear in the WordPress admin but can not be modified. You may wish to do this to have more control over the data source or because you have more advanced data processing needs. + +This [example template](https://github.com/Automattic/remote-data-blocks/tree/trunk/example/templates/rest-api-block-from-ui-data-source) will replicate what we've done in this tutorial. diff --git a/package-lock.json b/package-lock.json index abb68da3..66be2da6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -212,7 +212,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz", "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==", "dev": true, - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.24.7", @@ -2092,7 +2091,6 @@ "url": "https://opencollective.com/csstools" } ], - "peer": true, "engines": { "node": ">=18" }, @@ -2115,7 +2113,6 @@ "url": "https://opencollective.com/csstools" } ], - "peer": true, "engines": { "node": ">=18" } @@ -2237,7 +2234,6 @@ "version": "11.13.0", "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.0.tgz", "integrity": "sha512-WkL+bw1REC2VNV1goQyfxjx1GYJkcc23CRQkXX+vZNLINyfI7o+uUn/rTGPt/xJ3bJHd5GcljgnxHf4wRw5VWQ==", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.12.0", @@ -3976,7 +3972,6 @@ "integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "playwright": "1.57.0" }, @@ -5144,7 +5139,6 @@ "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", "dev": true, - "peer": true, "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", @@ -5404,7 +5398,8 @@ "version": "5.0.4", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", - "dev": true + "dev": true, + "peer": true }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -5689,7 +5684,6 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-22.4.1.tgz", "integrity": "sha512-1tbpb9325+gPnKK0dMm+/LMriX0vKxf6RnB0SZUqfyVkQ4fMgUSySqhxE/y8Jvs4NyF1yHzTfG9KlnkIODxPKg==", "dev": true, - "peer": true, "dependencies": { "undici-types": "~6.19.2" } @@ -5741,7 +5735,6 @@ "version": "18.3.3", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", - "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -5751,7 +5744,6 @@ "version": "18.3.0", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", - "peer": true, "dependencies": { "@types/react": "*" } @@ -5889,7 +5881,6 @@ "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.39.tgz", "integrity": "sha512-otxUJvoi6FbBq/64gGH34eblpKLgdi+gf08GaAh8Bx6So0ZZic028Ev/SUxD22gbthMKCkeeiXEat1kHLDJfYg==", "dev": true, - "peer": true, "dependencies": { "@types/node": "*", "@types/tapable": "^1", @@ -6857,7 +6848,6 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.15.0.tgz", "integrity": "sha512-uiNHpyjZtFrLwLDpHnzaDlP3Tt6sGMqTCiqmxaN4n4RP0EfYZDODJyddiFDF44Hjwxr5xAcaYxVKm9QKQFJFLA==", "dev": true, - "peer": true, "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "7.15.0", @@ -8984,7 +8974,6 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz", "integrity": "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==", "dev": true, - "peer": true, "dependencies": { "@eslint-community/regexpp": "^4.5.1", "@typescript-eslint/scope-manager": "6.21.0", @@ -9020,7 +9009,6 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz", "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==", "dev": true, - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "6.21.0", "@typescript-eslint/types": "6.21.0", @@ -9449,7 +9437,6 @@ "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-3.0.3.tgz", "integrity": "sha512-X4UlrxDTH8oom9qXlcjnydsjAOD2BmB6yFmvS4Z2zdTzqqpRWb+fbqrH412+l+OUXmbzJlSXjlMFYPgYG12IAA==", "dev": true, - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -9778,7 +9765,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", "dev": true, - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -9852,7 +9838,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dev": true, - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -10480,7 +10465,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", - "peer": true, "dependencies": { "@babel/runtime": "^7.12.5", "cosmiconfig": "^7.0.0", @@ -10843,7 +10827,6 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001646", "electron-to-chromium": "^1.5.4", @@ -12888,8 +12871,7 @@ "version": "0.0.1312386", "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1312386.tgz", "integrity": "sha512-DPnhUXvmvKT2dFA/j7B+riVLUt9Q6RKJlcppojL5CoRywJJKLDYnRlw0gTFKfgDPHP5E04UoB71SxoJlVZy8FA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/diff": { "version": "4.0.2", @@ -12961,7 +12943,8 @@ "version": "0.5.16", "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", - "dev": true + "dev": true, + "peer": true }, "node_modules/dom-serializer": { "version": "2.0.0", @@ -13521,7 +13504,6 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz", "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "dev": true, - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -13660,7 +13642,6 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz", "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==", "dev": true, - "peer": true, "dependencies": { "array-includes": "^3.1.7", "array.prototype.findlastindex": "^1.2.3", @@ -17246,7 +17227,6 @@ "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz", "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==", "dev": true, - "peer": true, "dependencies": { "@jest/core": "^29.7.0", "@jest/types": "^29.6.3", @@ -19074,6 +19054,7 @@ "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, + "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -19894,7 +19875,6 @@ "resolved": "https://registry.npmjs.org/npm-package-json-lint/-/npm-package-json-lint-6.4.0.tgz", "integrity": "sha512-cuXAJJB1Rdqz0UO6w524matlBqDBjcNt7Ru+RDIu4y6RI1gVqiWBnylrK8sPRk81gGBA0X8hJbDXolVOoTc+sA==", "dev": true, - "peer": true, "dependencies": { "ajv": "^6.12.6", "ajv-errors": "^1.0.1", @@ -20941,7 +20921,6 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", @@ -21602,7 +21581,6 @@ "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz", "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==", "dev": true, - "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/preact" @@ -21623,7 +21601,6 @@ "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.8.5.tgz", "integrity": "sha512-gkphzYtVksWV6D7/V530bTehKkhrABUru/Gy4reOLOHJoKH4i9lcE1SxqU2VDxC3gCOx/Nk9alZmWk6xL/IBCw==", "dev": true, - "peer": true, "bin": { "prettier": "bin-prettier.js" }, @@ -21651,6 +21628,7 @@ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, + "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -21665,6 +21643,7 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, + "peer": true, "engines": { "node": ">=10" }, @@ -21676,7 +21655,8 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", - "dev": true + "dev": true, + "peer": true }, "node_modules/prismjs": { "version": "1.30.0", @@ -22029,7 +22009,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -22096,7 +22075,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -22130,7 +22108,6 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==", "dev": true, - "peer": true, "engines": { "node": ">=0.10.0" } @@ -22391,7 +22368,6 @@ "version": "4.2.1", "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", - "peer": true, "dependencies": { "@babel/runtime": "^7.9.2" } @@ -22992,7 +22968,6 @@ "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz", "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==", "dev": true, - "peer": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", @@ -23087,7 +23062,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dev": true, - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -24426,7 +24400,6 @@ "url": "https://github.com/sponsors/stylelint" } ], - "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", @@ -24680,7 +24653,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz", "integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==", "dev": true, - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -25185,7 +25157,6 @@ "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -25500,7 +25471,6 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -25621,7 +25591,6 @@ "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -26024,7 +25993,6 @@ "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", @@ -26138,7 +26106,6 @@ "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -26152,7 +26119,6 @@ "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/chai": "^5.2.2", "@vitest/expect": "3.2.4", @@ -26370,7 +26336,6 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz", "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==", "dev": true, - "peer": true, "dependencies": { "@types/estree": "^1.0.5", "@webassemblyjs/ast": "^1.12.1", @@ -26473,7 +26438,6 @@ "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz", "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==", "dev": true, - "peer": true, "dependencies": { "@discoveryjs/json-ext": "^0.5.0", "@webpack-cli/configtest": "^2.1.1", @@ -26601,7 +26565,6 @@ "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz", "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==", "dev": true, - "peer": true, "dependencies": { "@types/bonjour": "^3.5.9", "@types/connect-history-api-fallback": "^1.3.5", @@ -27242,7 +27205,6 @@ "integrity": "sha512-OIDwaflOaq4wC6YlPBy2L6ceKeKuF7DeTxx+jPzv1FHn9tCZ0ZwSRnUBxD05E3yed46fv/FWJbvR+Ud7x0L7zw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "lib0": "^0.2.99" }, From ac324df5142c5ce7ee4ed24fd84123fc92dc9795 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 21 Jan 2026 15:54:58 +0000 Subject: [PATCH 3/8] Improve clarity of HTTP tutorial instructions Co-authored-by: maxschmeling <112691+maxschmeling@users.noreply.github.com> --- docs/tutorials/http.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorials/http.md b/docs/tutorials/http.md index 5493e436..0c180f64 100644 --- a/docs/tutorials/http.md +++ b/docs/tutorials/http.md @@ -22,13 +22,13 @@ In code, we'll define a query using the data source we just created. Follow the $data_source = HttpDataSource::from_uuid( '{{ Data source UUID }}' ); ``` -Replace `{{ Data source UUID }}` with the UUID you copied from step 7. +Replace `{{ Data source UUID }}` with the UUID you copied from the data source creation step above (step 7 in "Create the data source"). The query should append the zip code input variable to the data source endpoint, and define the output schema to map the API response fields to display in your block. Once registered, your block will be available in the block editor. ## Insert the block -Create or edit a page or post, then using the Block Inserter, search for "Zip Code" (or whatever name you gave your block). +Create or edit a page or post, then using the Block Inserter, search for your block by the title you used when registering it (e.g., "Zip Code"). After inserting the block, you'll be prompted to enter a zip code. Enter a valid US zip code (e.g., "90210") to see the location data appear in the block. From 3b3a1972486bd723068d47bf0b8a66df10c9b207 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 21 Jan 2026 19:47:04 +0000 Subject: [PATCH 4/8] Add complete query example to HTTP tutorial Co-authored-by: maxschmeling <112691+maxschmeling@users.noreply.github.com> --- docs/tutorials/http.md | 68 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 65 insertions(+), 3 deletions(-) diff --git a/docs/tutorials/http.md b/docs/tutorials/http.md index 0c180f64..d12da647 100644 --- a/docs/tutorials/http.md +++ b/docs/tutorials/http.md @@ -16,15 +16,77 @@ This page will walk you through registering a remote data block that loads data ## Register the block -In code, we'll define a query using the data source we just created. Follow the [Zip code block example](https://github.com/Automattic/remote-data-blocks/tree/trunk/example/blocks/zip-code-block/zip-code-block.php), but remove the data source definition. In its place, use this code to load the data source we just created by its UUID: +Now we'll write code to define a query and register a block using the data source we just created. Add this code to your theme's `functions.php` file or a custom plugin: ```php -$data_source = HttpDataSource::from_uuid( '{{ Data source UUID }}' ); + $zip_code_data_source, + 'display_name' => 'Get location by Zip code', + // Provide a callable (closure) to dynamically generate the endpoint using + // the base endpoint from the data source and the input variables. + 'endpoint' => function ( array $input_variables ) use ( $zip_code_data_source ): string { + return $zip_code_data_source['endpoint'] . $input_variables['zip_code']; + }, + 'input_schema' => [ + 'zip_code' => [ + 'name' => 'Zip Code', + 'type' => 'string', + ], + ], + 'output_schema' => [ + 'is_collection' => false, // This query returns a single record. + 'type' => [ + 'zip_code' => [ + 'name' => 'Zip Code', + 'path' => '$["post code"]', // JSON property with space requires brackets and quotes. + 'type' => 'string', + ], + 'city' => [ + 'name' => 'City', + 'path' => '$.places[0]["place name"]', // JSON property with space requires brackets and quotes. + 'type' => 'string', + ], + 'state' => [ + 'name' => 'State', + 'path' => '$.places[0].state', + 'type' => 'string', + ], + ], + ], + ]; + + // Register the remote data block + register_remote_data_block( [ + 'title' => 'Zip Code', + 'render_query' => [ + 'query' => $zip_code_query, + ], + ] ); +} +add_action( 'init', 'register_zip_code_remote_data_block' ); ``` Replace `{{ Data source UUID }}` with the UUID you copied from the data source creation step above (step 7 in "Create the data source"). -The query should append the zip code input variable to the data source endpoint, and define the output schema to map the API response fields to display in your block. Once registered, your block will be available in the block editor. +This code does the following: + +1. **Loads the data source** by UUID using `HttpDataSource::from_uuid()` +2. **Defines a query** that: + - Takes a zip code as input + - Appends it to the data source endpoint (e.g., `https://api.zippopotam.us/us/90210`) + - Maps the API response fields to block outputs (zip code, city, state) +3. **Registers the block** with the title "Zip Code" and associates it with the query + +Once you save this code and reload your WordPress admin, the block will be available in the block editor. ## Insert the block From e94177e4af8f3114156c665f75d571ff2c29e960 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 21 Jan 2026 19:47:42 +0000 Subject: [PATCH 5/8] Add input validation and improve JSONPath comments Co-authored-by: maxschmeling <112691+maxschmeling@users.noreply.github.com> --- docs/tutorials/http.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/tutorials/http.md b/docs/tutorials/http.md index d12da647..85e1be56 100644 --- a/docs/tutorials/http.md +++ b/docs/tutorials/http.md @@ -34,7 +34,9 @@ function register_zip_code_remote_data_block(): void { // Provide a callable (closure) to dynamically generate the endpoint using // the base endpoint from the data source and the input variables. 'endpoint' => function ( array $input_variables ) use ( $zip_code_data_source ): string { - return $zip_code_data_source['endpoint'] . $input_variables['zip_code']; + // Validate and sanitize the zip code input + $zip_code = preg_replace( '/[^0-9-]/', '', $input_variables['zip_code'] ?? '' ); + return $zip_code_data_source['endpoint'] . $zip_code; }, 'input_schema' => [ 'zip_code' => [ @@ -47,12 +49,12 @@ function register_zip_code_remote_data_block(): void { 'type' => [ 'zip_code' => [ 'name' => 'Zip Code', - 'path' => '$["post code"]', // JSON property with space requires brackets and quotes. + 'path' => '$["post code"]', // JSONPath syntax: brackets and quotes for properties with spaces. 'type' => 'string', ], 'city' => [ 'name' => 'City', - 'path' => '$.places[0]["place name"]', // JSON property with space requires brackets and quotes. + 'path' => '$.places[0]["place name"]', // JSONPath syntax: brackets and quotes for properties with spaces. 'type' => 'string', ], 'state' => [ From d06b23ea702d082043b5a33724d986293a173ad8 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 21 Jan 2026 19:49:10 +0000 Subject: [PATCH 6/8] Simplify endpoint code to match existing examples Co-authored-by: maxschmeling <112691+maxschmeling@users.noreply.github.com> --- docs/tutorials/http.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/tutorials/http.md b/docs/tutorials/http.md index 85e1be56..b853d507 100644 --- a/docs/tutorials/http.md +++ b/docs/tutorials/http.md @@ -34,8 +34,7 @@ function register_zip_code_remote_data_block(): void { // Provide a callable (closure) to dynamically generate the endpoint using // the base endpoint from the data source and the input variables. 'endpoint' => function ( array $input_variables ) use ( $zip_code_data_source ): string { - // Validate and sanitize the zip code input - $zip_code = preg_replace( '/[^0-9-]/', '', $input_variables['zip_code'] ?? '' ); + $zip_code = $input_variables['zip_code'] ?? ''; return $zip_code_data_source['endpoint'] . $zip_code; }, 'input_schema' => [ From 1daf4f9dc8ed0427a69082445f0300ca706b735f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 21 Jan 2026 19:49:55 +0000 Subject: [PATCH 7/8] Match zip-code-block example exactly and improve comments Co-authored-by: maxschmeling <112691+maxschmeling@users.noreply.github.com> --- docs/tutorials/http.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/tutorials/http.md b/docs/tutorials/http.md index b853d507..83d96687 100644 --- a/docs/tutorials/http.md +++ b/docs/tutorials/http.md @@ -34,8 +34,7 @@ function register_zip_code_remote_data_block(): void { // Provide a callable (closure) to dynamically generate the endpoint using // the base endpoint from the data source and the input variables. 'endpoint' => function ( array $input_variables ) use ( $zip_code_data_source ): string { - $zip_code = $input_variables['zip_code'] ?? ''; - return $zip_code_data_source['endpoint'] . $zip_code; + return $zip_code_data_source['endpoint'] . $input_variables['zip_code']; }, 'input_schema' => [ 'zip_code' => [ @@ -48,12 +47,12 @@ function register_zip_code_remote_data_block(): void { 'type' => [ 'zip_code' => [ 'name' => 'Zip Code', - 'path' => '$["post code"]', // JSONPath syntax: brackets and quotes for properties with spaces. + 'path' => '$["post code"]', // JSONPath syntax: brackets and quotes for property names with spaces. 'type' => 'string', ], 'city' => [ 'name' => 'City', - 'path' => '$.places[0]["place name"]', // JSONPath syntax: brackets and quotes for properties with spaces. + 'path' => '$.places[0]["place name"]', // JSONPath syntax: brackets and quotes for property names with spaces. 'type' => 'string', ], 'state' => [ From aed3a15e0ca1bbbdcc037c783dc495181e6f2937 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 21 Jan 2026 19:50:41 +0000 Subject: [PATCH 8/8] Use exact comment style from zip-code-block example Co-authored-by: maxschmeling <112691+maxschmeling@users.noreply.github.com> --- docs/tutorials/http.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorials/http.md b/docs/tutorials/http.md index 83d96687..d12da647 100644 --- a/docs/tutorials/http.md +++ b/docs/tutorials/http.md @@ -47,12 +47,12 @@ function register_zip_code_remote_data_block(): void { 'type' => [ 'zip_code' => [ 'name' => 'Zip Code', - 'path' => '$["post code"]', // JSONPath syntax: brackets and quotes for property names with spaces. + 'path' => '$["post code"]', // JSON property with space requires brackets and quotes. 'type' => 'string', ], 'city' => [ 'name' => 'City', - 'path' => '$.places[0]["place name"]', // JSONPath syntax: brackets and quotes for property names with spaces. + 'path' => '$.places[0]["place name"]', // JSON property with space requires brackets and quotes. 'type' => 'string', ], 'state' => [