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
AcfArticleBlockPropsAcfArticleGridBlockAcfArticleSliderBlockAcfCallToActionBlockAcfCategoriesCloudBlockAcfFacebookPostBlockAcfFacebookVideoBlockAcfGraphicalCtaBlockAcfImageWithSubtitleBlockAcfInfoBadgeBlockAcfLatestRecipesBlockAcfListArticleBlockAcfNewsletterBlockAcfProductCardBlockAcfProductListLightBlockAcfProductTableBlockAcfRecipeBlockAcfRecipeResearchCollectionBlockAcfRecipeSearchBlockAcfRelatedArticlesInlineBlockAcfSidebarBlockBlockAcfToolsAndMaterialsBlockAcfTopStoryBlockAcfToutCategoryBlockAcfTrustBadgeBlockAcfWarrantyBlockCoreColumnsBlockCoreEmbedBlockCoreFileBlockCoreGalleryBlockCoreGroupBlockCoreHeadingBlockCoreImageBlockCoreListBlockCoreParagraphBlockCorePullquoteBlockCoreQuoteBlockCoreSearchBlockCoreSeparatorBlockCoreTableBlockEmpireioConnatixElementsBlockOrganicAffiliateProductCardBlockOrganicAffiliateProductCarouselBlockPdfembPdfEmbedderViewerBlockYoastFaqBlockYoastHowToBlockYoastSeoBreadcrumbsBlock