Display Firestore Collection as Blocks

This shortcode will help to retrieve a whole collection data from Realtime database and display it as blocks on your page or post.

Remember to set the security rule for your viewers.

// show firestore data basing on collection name as blocks
[firestore_blocks class='your-class-name' collection_name='blog' display_fields='title,description,more' images='url']

// In order to sort the data, you can add order_by. For example, this will order by title - descendant. You can also combine the orders: `order_by='title|asc,description|desc'`

// Generate a link to a child page by adding "child_page" & "child_page_target_field"
// Display fields can also be accessed via key dot notation (e.g. author.fullName)
// If you want to display documentId, you can add id to the display_fields

[firestore_blocks class='your-class-name' collection_name='blog' display_fields='title,author.fullName,createdAt,description,more' images='image.url' order_by='title|DESC' child_page='https://wordpress.dalenguyen.me/dynamic-display-firestore-data-from-blocks/' child_page_target_field='title']

I suggest that you also add this shortcode to show any error when retriving data:

[firebase_error class='your-class-name'][/firebase_error]

It will get data from blog collection and display data basing on the display fields. You can style it by replacing your-class-name.

// This is structure, you can style the elements by using CSS
<div class="if-firestore-blocks">
	<div class="if-firestore-blocks__content 1">
		<div class="if-firestore-blocks__content__images">
			<img src="" alt="">
		</div>
		<div class="if-firestore-blocks__content__title">First title</div>
		<div class="if-firestore-blocks__content__description">This is a description</div>
		<div class="if-firestore-blocks__content__more"><a href="#">Read more</a></div>
	</div>
        // more items here
</div>

// Sample CSS
.if-firestore-blocks {
    display: grid;
    grid-template-areas: 'item item';
    grid-gap: 20px;
}