Skip to main content

Blocks

Rendering Blocks

The blocks attribute in every page response object can be rendered by importing the Blocks component and passing the blocks prop as an argument.

import Blocks from '@orgnc/core/components/blocks/Blocks';

export default function SomeComponent({ blocks, ...rest }) {
return <Blocks blocks={blocks} />;
}

Theme Blocks

The theme API includes a blocks property that accepts a components object, which enables individual definition/styling of theme block components, rather than utilizing the default styled blocks provided by the base/default theme. This components object will override the components defined in the RenderBlock component at the theme level.

import createTheme from '@orgnc/core/lib/themes/createTheme';

const CustomCorePullquoteBlock = dynamic(
() => import('path/to/CustomCorePullquoteBlock'),
);

const theme = createTheme({
blocks: {
components: {
CorePullquoteBlock: CustomCorePullquoteBlock,
// ... Other block components
},
},
});

export default theme;

Component Blocks

The <Blocks/> component of the API offers a more granular level of control through the components prop. This prop accepts a components object, which enables the definition and styling of individual block components, thus overriding the default styled blocks. The use of the components prop supersedes the components provided by the RenderBlock component at the component level.

import Blocks from '@components/blocks/Blocks';

const CustomCorePullquoteBlock = dynamic(
() => import('path/to/CustomCorePullquoteBlock'),
);

export default function SomeComponent({ blocks, ...rest }) {
return (
<Blocks
blocks={blocks}
components={{
CorePullquoteBlock: CustomCorePullquoteBlock,
// ... Other block components
}}
/>
);
}

Supported Blocks

  • AcfArticleBlockProps
  • AcfArticleGridBlock
  • AcfArticleSliderBlock
  • AcfCallToActionBlock
  • AcfCategoriesCloudBlock
  • AcfFacebookPostBlock
  • AcfFacebookVideoBlock
  • AcfGraphicalCtaBlock
  • AcfImageWithSubtitleBlock
  • AcfInfoBadgeBlock
  • AcfLatestRecipesBlock
  • AcfListArticleBlock
  • AcfNewsletterBlock
  • AcfProductCardBlock
  • AcfProductListLightBlock
  • AcfProductTableBlock
  • AcfRecipeBlock
  • AcfRecipeResearchCollectionBlock
  • AcfRecipeSearchBlock
  • AcfRelatedArticlesInlineBlock
  • AcfSidebarBlockBlock
  • AcfToolsAndMaterialsBlock
  • AcfTopStoryBlock
  • AcfToutCategoryBlock
  • AcfTrustBadgeBlock
  • AcfWarrantyBlock
  • CoreColumnsBlock
  • CoreEmbedBlock
  • CoreFileBlock
  • CoreGalleryBlock
  • CoreGroupBlock
  • CoreHeadingBlock
  • CoreImageBlock
  • CoreListBlock
  • CoreParagraphBlock
  • CorePullquoteBlock
  • CoreQuoteBlock
  • CoreSearchBlock
  • CoreSeparatorBlock
  • CoreTableBlock
  • EmpireioConnatixElementsBlock
  • OrganicAffiliateProductCardBlock
  • OrganicAffiliateProductCarouselBlock
  • PdfembPdfEmbedderViewerBlock
  • YoastFaqBlock
  • YoastHowToBlock
  • YoastSeoBreadcrumbsBlock