New! Better docs, TypeScript support, UI kit improvements, globalConfig inspector (December 2019)

Topic Labels: Custom Extensions
3535 0
Showing results for 
Search instead for 
Did you mean: 

Thank you for participating in the custom blocks beta!

To celebrate the holidays and ring in the next decade, the latest version of custom blocks has all kinds of presents :gift:

Upgrade to the latest version and get all the goodies below. Just open up your terminal and run:

cd <your-block-folder>
npm install @airtable/blocks
npm install -g @airtable/blocks-cli

Be sure to check the changelog for any minor breaking changes. Now on to the fun stuff!

New examples and documentation :memo:

Our documentation has a shiny new home at Airtable Blocks SDK. No more clicking back and forth through markdown files trying to figure out the interface for a LinkedRecordsQueryResult . The new docs site has native search with autocomplete, an improved hierarchy view for the SDK, and beautiful formatting.

docs 3

We also added a new table structure example block that reads and displays the metadata for the user’s current table. Check it out if you’re looking for inspiration, along with all our existing examples.

TypeScript support :pray:

The custom blocks SDK now ships with TypeScript definitions. In addition to enabling blocks to be built with TypeScript, this means autocomplete in editors like VS Code is :ok_hand: right out of the box.

Screen Shot 2019-12-19 at 11.38.12 AM

If you’d like to use TypeScript in one of your projects, try the following:

  1. cd <your-block-folder>
  2. npm install --save-dev typescript @types/react @types/react-dom @typescript-eslint/parser
  3. Add "parser": '@typescript-eslint/parser' to .eslintrc.js
  4. mv frontend/index.js frontend/index.tsx
  5. Change frontentEntry in block.json to index.tsx
  6. block run

globalConfig inspector :sparkles:

Tired of viewing your globalConfig state via console.log ? The new inspector lets you read and clear your globalConfig with ease.

Screen Shot 2019-12-19 at 11.34.11 AM

UI kit improvements :framed_picture:

We’ve also revamped the Blocks SDK UI library — components look nicer out of the box, with new components for form controls/labels and typography. Alongside these changes, we’ve introduced new APIs for styling and layout to help you build blocks that are more visually consistent with the rest of the Airtable UI.

Screen Shot 2019-12-27 at 8.13.30 PM

Thank you!

P.S. Your feedback inspires the work we do. Take a moment to make custom blocks do more for you by providing feedback: Custom Blocks Feedback

0 Replies 0