CoreImage Block

[TeresaGobble]

Tasks

• I have signed a Contributor License Agreement (CLA) with WP Engine.
• If a code change, I have written testing instructions that the whole team & outside contributors can understand.
• I have written and included a comprehensive changeset to properly document the changes I've made.

Description

Related Issue(s):

Testing

You can reference this commit for the testing changes.

1. Generate the global stylessheet and import it into the project. faust generateGlobalStylesheet.
2. Copy your theme.json from your WordPress template (I'm using twentytwentytwo) into your Faust app.
3. Setup the Faust app with the theme.json and global stylesheet:

   import { WordPressBlocksProvider, fromThemeJson } from '@faustwp/blocks';
   import themeJson from '../theme.json';
   import '../globalStylesheet.css';
   
   export default function MyApp({ Component, pageProps }) {
     const router = useRouter();
     return (
       <FaustProvider pageProps={pageProps}>
         <WordPressBlocksProvider
           config={{
             blocks,
             theme: fromThemeJson(themeJson),
           }}>
           <Component {...pageProps} key={router.asPath} />
         </WordPressBlocksProvider>
       </FaustProvider>
     );
   }

4. Import the blocks in the wp-blocks/index.js file:

   import { coreBlocks } from '@faustwp/blocks';
   
   export default {
     ...coreBlocks,
   };

5. Use the block fragment in the post query to get the CoreList data:

   ${CoreBlocks.CoreImage.fragments.entry}
   ...
   editorBlocks {
           __typename
           renderedHtml
           id: clientId
           parentClientId
           ...${CoreBlocks.CoreImage.fragments.key}
         }

6. Use the editorBlocks from props.data.post in WordPressBlocksViewer:

   <Container>
     <ContentWrapper>
       <WordPressBlocksViewer blocks={flatListToHierarchical(editorBlocks)}/>
     </ContentWrapper>
   </Container>

7. Go to WordPress site and create several image blocks combining styles, colors, links, captions, etc.

Screenshots

Documentation Changes

Dependant PRs

[changeset-bot]

🦋 Changeset detected

Latest commit: f174397

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@faustwp/blocks	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

📦 Next.js Bundle Analysis for @faustwp/getting-started-example

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[github-actions]

Coverage report for packages/faustwp-core

St.❔	Category	Percentage	Covered / Total
🟢	Statements	83.56%	849/1016
🟡	Branches	68.53%	516/753
🟢	Functions	84.4%	119/141
🟢	Lines	83.21%	818/983

Test suite run success

121 tests passing in 22 suites.

Report generated by 🧪jest coverage report action from f174397

[github-actions]

Coverage report for packages/faustwp-cli

St.❔	Category	Percentage	Covered / Total
🟢	Statements	84.71%	72/85
🔴	Branches	57.14%	8/14
🟡	Functions	63.64%	14/22
🟢	Lines	83.58%	56/67

Test suite run success

15 tests passing in 5 suites.

Report generated by 🧪jest coverage report action from f174397