Ejecting a Block with Outbound Feeds

To do local development of a feed, either modifying an existing block or creating your own will follow the standard PageBuilder Engine development pattern. Using a local repository add files into the components and content directories, run PageBuilder Engine locally and build pages and templates using your new components.

If you want to start with an existing feed block you need to copy it from Https://Github.Com/WPMedia/Feed-Components and add it to your repo. This is called “ejecting the block.”

Copy the block

Although blocks are just npm packages, they are not installed in the typical way an npm package would be. They are only loaded at run time by @arc-fusion/cli. You can confirm this by doing an

npm list

in your local repo. You will not see any of the outboundfeeds blocks.

To get a block locally lookup the block name from Blocks.Json and either copy it from https://github.com/WPMedia/feed-components/tree/prod/blocks or use npm to install the package in a temp directory. Do not install it in your PageBuilder Engine repo or you could create a conflict with the packages installed via blocks.json. For this example we will use “@wpmedia/rss-feature-block”. To get the production version of the block you can use the “@stable” tag. To get the sandbox version of the block use the “@beta” tag.

cd /tmp
cp ~/.npmrc .
npm install @wpmedia/rss-feature-block@stable

If that was successful you now have the package downloaded to your local node_modules directory. You can confirm that by listing the contents of your node_modules with

ls node_modules/@wpmedia/rss-feature-block

You should see a directory listing like:

CHANGELOG.md
README.md
features/
   │
   └───rss
       │
       └───__snapshots__
        xml.js
        xml.test.js
index.js
package.json

The “rss” directory needs to be copied to the components/features directory. You should rename it to distinguish it from the Feed Block you copied it from. Your components directory should look like:

components
   │
   └───features
        │
        └───customRSS
            │
            └───__snapshots__
             xml.js
             xml.test.js

In the xml.js file, there is an assignment of the objects label

javascript Rss.label = 'RSS Standard'

That is the name that will appear when the Outbound Feeds Editor lists all features. Change the label to something meaningful. The xml.js file should not be renamed. It needs to be named for the outputType that should be used to generate it.

Dependencies

Compare the blocks package.json dependencies with your repo’s package.json and add anything missing to your repo’s package.json. Note, if adding xmlbuilder2, be sure to use version “2.1.2″