Is CoreCode block example still working?

[bilalmalkoc]

Hello. I am new at Faust.js and i am following this guide: https://faustjs.org/guide/how-to-create-a-block-from-the-wordpress-blocks-list

I added Code block into hello-world post but there is no console message. CoreCode block attributes is not showing in console. Where i am wrong?

// wp-blocks/CoreCode.js
import React from 'react';
import { gql } from '@apollo/client';

export default function CoreCode(props) {
    console.log(props.attributes);
    return <div>CoreCode</div>;
}

// add fragment
CoreCode.fragments = {
    key: `CoreCodeBlockFragment`,
    entry: gql`
    fragment CoreCodeBlockFragment on CoreCode {
      attributes {
        borderColor
        backgroundColor
        content
        style
        textColor
        fontSize
        fontFamily
        cssClassName
      }
    }
  `,
};
CoreCode.displayName = 'CoreCode';

// wp-blocks/index.js
import CoreCode from './CoreCode';

export default {
    'CoreCode': CoreCode,
};

// wp-templates/single.js
import { gql } from '@apollo/client';
import blocks from '../wp-blocks';
import * as MENUS from '../constants/menus';
import { BlogInfoFragment } from '../fragments/GeneralSettings';
import {
  Header,
  Footer,
  Main,
  Container,
  EntryHeader,
  NavigationMenu,
  ContentWrapper,
  FeaturedImage,
  SEO,
} from '../components';

export default function Component(props) {
  // Loading state for previews
  if (props.loading) {
    return <>Loading...</>;
  }

  const { title: siteTitle, description: siteDescription } =
    props?.data?.generalSettings;
  const primaryMenu = props?.data?.headerMenuItems?.nodes ?? [];
  const footerMenu = props?.data?.footerMenuItems?.nodes ?? [];
  const { title, content, featuredImage, date, author } = props.data.post;

  return (
    <>
      <SEO
        title={siteTitle}
        description={siteDescription}
        imageUrl={featuredImage?.node?.sourceUrl}
      />
      <Header
        title={siteTitle}
        description={siteDescription}
        menuItems={primaryMenu}
      />
      <Main>
        <>
          <EntryHeader
            title={title}
            image={featuredImage?.node}
            date={date}
            author={author?.node?.name}
          />
          <Container>
            <ContentWrapper content={content} />
          </Container>
        </>
      </Main>
      <Footer title={siteTitle} menuItems={footerMenu} />
    </>
  );
}

Component.query = gql`
  ${BlogInfoFragment}
  ${NavigationMenu.fragments.entry}
  ${FeaturedImage.fragments.entry}
  ${blocks.CoreCode.fragments.entry}
  query GetPost(
    $databaseId: ID!
    $headerLocation: MenuLocationEnum
    $footerLocation: MenuLocationEnum
    $asPreview: Boolean = false
  ) {
    post(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
      title
      content
      date
      author {
        node {
          name
        }
      }
      ...FeaturedImageFragment
      editorBlocks {
        name
        __typename
        renderedHtml
        id: clientId
        parentClientId
        ...${blocks.CoreCode.fragments.key}
      }
    }
    generalSettings {
      ...BlogInfoFragment
    }
    headerMenuItems: menuItems(where: { location: $headerLocation }) {
      nodes {
        ...NavigationMenuItemFragment
      }
    }
    footerMenuItems: menuItems(where: { location: $footerLocation }) {
      nodes {
        ...NavigationMenuItemFragment
      }
    }
  }
`;

Component.variables = ({ databaseId }, ctx) => {
  return {
    databaseId,
    headerLocation: MENUS.PRIMARY_LOCATION,
    footerLocation: MENUS.FOOTER_LOCATION,
    asPreview: ctx?.asPreview,
  };
};

[matthewguywright]

Hey @bilalmalkoc. You have all the scaffolding correct for this implementation except for one thing. That's the WordPressBlocksViewer. It is briefly mentioned in the docs but we noticed it could be called out a little better and I have ticketed for us to add more detail around the viewer. You have queried and created all you need for getting the data for the CoreCode block but now you need to display it. That is done using the WordPressBlocksViewer.

Note: You can verify you have all the correct data by logging the editorBlocks portion of your query.

You can see a quick reference from the documentation here to use the WordPressBlocksViewer to display the blocks but the full doc is here. Once the block is rendered using the viewer you will then be able to see the logs and other things that you were expecting.

// wp-templates/single.js
import { WordPressBlocksViewer } from '@faustwp/blocks';
import components from '../wp-blocks';

export default function Component(props) {
  const { editorBlocks } = props.data.post;
  const blocks = flatListToHierarchical(editorBlocks);
 
  return <WordPressBlocksViewer blocks={blocks}/>
}

WordPressBlocksViewer Documentation

[monahmad]

Thanks for the information.