Proper Approach using Gutenberg?


I’ve been using Frontity currently to build a site for a client and I am loving it so far!

Just a question about using the Gutenberg editor and blocks. What is the proper approach to using the blocks in your opinion?

Currently, I just have it set up using one custom HTML block for each page. However, I was wondering what is best practices for this? Do you use multiple HTML blocks and break it up by sections? Do you build multiple Wordpress pages to hold different contents of components?

Just wondering how others are doing this and what are the pros/cons of one way or another.

Screenshot is how I have it in the editor, and what its rendering:

I think you can create a custom block for Gutenberg and use a processor with html2react for apply styles in the frontity theme create, or add the css to paint the block in global styles.

In my opinion, this workflow is painful, and I have developed a tool that allows you to create custom blocks from html and css.

The design of the blocks is sent in the rest api, so you can see in your frontity theme without doing anything.

The plugin is
And the tool to create blocks is

Hope it helps you


Very Interesting! I’ll definitely give some of these a try. I’m about to rebuild my portfolio using frontity because I’m loving it so much.

I actually found that if you just put any structural HTML in blocks, and wrapped it around any type of text or element blocks - that also does the job so that way in my use case - my client - can still at least type into the regular Wordpress editor so they can edit text without having to know how to code.

1 Like

Hi @chayce.solchaga!

How is your portfolio site going? Did you have a chance to take a look at the tool that Jesús share? I’m moving this topic to the Dev Talk & Questions category but please feel free to share your project when it’s finished in the Showcase category. We’d love to see the final result! :slight_smile:

I’m sure you’re probably aware of this but the Frontity website uses Frontity on the front-end and Gutenberg on the back-end, so maybe looking at the way that that’s been implemented could also help you with your own use case. The source code can be found in this repo.

My colleague @SantosGuillamot also gave this talk at the JavaScript for WordPress Conference about how it was built and he’s currently writing a blog post about it.

If you still have any questions, please feel free to share them!

Its going great. I’ve taken a pause on that to work on a site for a client using frontity as well.

Work in progress here:

Last step besides updating copy and images is to:
1a.) Create a ‘rental property’ custom post type where I can implement a carousel slider or gallery for images of the rental properties,
1b.) as well as pull in custom fields for each of these items to display onto the page.
2.) Implement carousel slider on bottom of homepage with customer testimonials.
DONE - I have custom post types working so properties work

BLOCKED on 1a, and 2. - I tried implementing react-swipe carousel over the weekend - I can implement it on its own like a react component - but can’t get it to work as expected if I’m pulling in data from my Wordpress site.

IN-PROGRESS - grabbing my acf fields from the API - I found them in my devtools using frontity.state.source. However, figuring out how to add them to my site has been a pain.

Below is my code for the property custom post type and what appears in devtools for my acf fields.

import React, { useEffect } from "react";
import { connect, styled } from "frontity";
import Link from "./link";
import List from "./list";
import FeaturedMedia from "./featured-media";

const Property = ({ state, actions, libraries }) => {
  // Get information about the current URL.
  const data = state.source.get(;
  // Get the data of the post.
  const property = state.source[data.type][];
  const bedrooms = property.acf.bedrooms;
  const bathrooms = property.acf.bathrooms;
  const pets_allowed = property.acf.pets_allowed

  // Get the html2react component.
  const Html2React = libraries.html2react.Component;

   * Once the post has loaded in the DOM, prefetch both the
   * home posts and the list component so if the user visits
   * the home page, everything is ready and it loads instantly.
  useEffect(() => {
  }, []);

  // Load the post, but only if the data is ready.
  return data.isReady ? (
    <Title dangerouslySetInnerHTML={{ __html: property.title.rendered }} /> 
    {/* Only display author and date on posts */}


  {/* Look at the settings to see if we should include the featured image */}
  {state.theme.featured.showOnPost && (
    <FeaturedMedia id={property.featured_media} />

  {/* Render the content using the Html2React component so the HTML is processed
   by the processors we included in the libraries.html2react.processors array. */}
    <Html2React html={property.content.rendered} />
  ) : null;

export default connect(Property);

Here is my acf’s in devtools:

    Proxy {data: {…}, category: {…}, tag: {…}, get: ƒ, entity: ƒ, …}
    [[Handler]]: Object
    [[Target]]: Object
    api: ""
    attachment: {}
    author: {1: {…}}
    authorBase: ""
    category: {}
    categoryBase: ""
    comment: {}
    /: {isFetching: false, isReady: true, link: "/", route: "/", query: Proxy, …}
    id: 1
    isFetching: false
    isReady: false
    __proto__: Object
    /contact/: {isFetching: false, isReady: true, link: "/contact/", route: "/contact/", query: {…}, …}
    id: 191
    isFetching: false
    isPostType: true
    isProperty: true
    isReady: true
    link: "/property/33-bronte-road/"
    page: 1
    query: {}
    route: "/property/33-bronte-road/"
    type: "property"
    __proto__: Object
    __proto__: Object
    entity: (_ref2)=> {…}
    get: (_ref)=> {…}
    homepage: "/home"
    isWpCom: (_ref3)=> {…}
    page: {6: {…}, 173: {…}}
    params: {}
    post: {}
    postEndpoint: "posts"
    postTypes: (2) [{…}, {…}]
    postsPage: "/blog"
    bathrooms: "1"
    bedrooms: "1"
    images: false
    pets_allowed: "No"
    property_address: "33 Bronte Road"
    property_description: "This is a Guest Realty Co. managed property."
    property_name: "33 Bronte at Bondi"
    smoking_allowed: "No"
    __proto__: Object
    author: 1
    categories: []
    content: {rendered: "↵<div class="alignnormal"><div id="metaslider-id-1…>↵        ↵    </div>↵</div></div>↵↵↵↵↵↵↵<p></p>↵", protected: false}
    date: "2020-10-19T08:59:01"
    date_gmt: "2020-10-19T08:59:01"
    featured_media: 0
    format: "standard"
    guid: {rendered: ";p=191"}
    id: 191
    link: "/property/33-bronte-road/"
    menu_order: 0
    meta: []
    modified: "2020-10-26T20:12:35"
    modified_gmt: "2020-10-26T20:12:35"
    slug: "33-bronte-road"
    status: "publish"
    tags: []
    template: ""
    title: {rendered: "33 Bronte Road"}
    type: "property"
    _embedded: {author: Array(1)}
    _links: {self: Array(1), collection: Array(1), about: Array(1), author: Array(1), wp:attachment: Array(1), …}
    __proto__: Object
    __proto__: Object
    subdirectory: ""
    tag: {}
    tagBase: ""
    taxonomies: []
    taxonomy: {}
    type: {}
    __proto__: Object
    [[IsRevoked]]: false
1 Like

update custom fields are displaying and working on custom post type!

Still working out the kinks of my react carousel

1 Like

Hi @chayce.solchaga,

Many thanks for the update and for keeping us posted of your progress. Glad to hear that you also decided to use Frontity for a client project. That’s great!

If I’m not mistaken, I see that you already opened another topic for this, so I’m sure any member of the team or the community will be able to help out with this soon. :slight_smile:

correct. I’ll mark your reply as the solution to close this topic

1 Like