Skip to content

Latest commit

 

History

History
41 lines (23 loc) · 3.23 KB

airtable.md

File metadata and controls

41 lines (23 loc) · 3.23 KB
Raw

Create an Airtable remote data block

This page will walk you through connecting an Airtable data source, registering a remote data block to display table records, and customizing the styling of that block. It will require you to commit code to a WordPress theme or plugin. If you have not yet installed and activated the Remote Data Blocks plugin, visit Getting Started.

Base and personal access token

First, identify an Airtable base and table that you would like to use as a data source. This example uses a base created from the default “Event planning” template, accessible from the Airtable home screen after logging in. We will target the “Schedule” table from that base.

airtable-template

Next, create a personal access token that has the data.records:read and schema.bases:read scopes and has access to the base or bases you wish to use.

create-pat

This personal access token is a secret that should be provided to your application securely. On WordPress VIP, we recommend using environment variables to provide this token. The code in this example assumes that the token has been provided securely via a constant named AIRTABLE_EVENTS_ACCESS_TOKEN.

Create the data source

  1. Go to the Settings > Remote Data Blocks in your WordPress admin.
  2. Click on the "Connect new" button.
  3. Choose "Airtable" from the dropdown menu as the data source type.
  4. Fill in the form to select your desired base, table, and fields.
  5. Save the data source and return the data source list.

Insert the block

Open a post for editing and select the block in the Block Inserter using the display name you provided.

select-from-list.mov

Custom patterns and styling

You can improve upon the default appearance of the block by creating your own patterns. Patterns can be associated with a remote data block in the "Pattern" settings in the sidebar of the pattern editor. Once associated with a remote data block, patterns will appear in the pattern selection modal. The Remote Data Blocks plugin supports both synced and unsynced patterns.

create-pattern.mov

Alternatively, you can alter the style of a remote data block using theme.json and / or custom stylesheets. See the example child theme in the Remote Data Blocks GitHub repository for more details.

Code reference

Check out a working example of the concepts above in the Remote Data Blocks GitHub repository and feel free to open an issue if you run into any difficulty when registering or customizing your remote data blocks.