10up

Jeffrey Paul

Darshan Sawardekar

dkotter

<ul>
<li>Find which blocks are used across your site.</li>
<li>Fully Integrated with the WordPress Admin.</li>
<li>Use filters to see Posts that use a specific block.</li>
<li>Find Posts that use Reusable Blocks.</li>
<li>Use the WP CLI to quickly find blocks from the command line.</li>
<li>Use custom WordPress filters to extend the Block Catalog.</li>
</ul>
<p><a href="https://github.com/10up/block-catalog" rel="nofollow ugc">Fork on GitHub</a></p>
<h3>Getting Started</h3>
<ol>
<li>
<p>On activation, the plugin will prompt you to index your content. You need to do this first before you will be able to see the various blocks used on your site. You can also go to <em>WP-Admin > Tools > Block Catalog</em> to do this yourself. Alternately, you can run the WP CLI command <code>wp block-catalog index</code> to index your content from the command line.</p>
</li>
<li>
<p>Once indexed, you will be able to see the different blocks used on your site in the Block Catalog Taxonomy.</p>
</li>
<li>
<p>Navigating to any Block Editor post type will also show you the list of blocks present in a post.</p>
</li>
<li>
<p>You can also filter the listing to only show Posts that have a specific block.</p>
</li>
</ol>


Block Catalog

Keep track of which Gutenberg Blocks are used across your site.

<ul>
<li>Embed a Figma file using a block in the WordPress editor.</li>
<li>Paste a Figma URL on a new line in the Block Editor to automatically convert it to a Figma Embed block.</li>
<li>Block settings allow for altering margins of rendered Figma file embed</li>
</ul>
<h3>Getting Started</h3>
<p>Once the plugin is installed and activated, you should see a new Figma Embed block. Insert this block into your content and enter the URL of the Figma file you want to embed.</p>
<p>Assuming it’s a valid URL, the block will automatically fetch the Figma file and display it in the editor. Once saved, this will also display on the front-end.</p>


Embed Block for Figma

Display Figma files using an Embed block.

Block Catalog vs Embed Block for Figma