Interactive Posts
IPPM: A WordPress Package Manager
Craft beautiful and highly interactive posts with WordPress packages. Packages contain assets that can be attached to each post to enhance the experience.
Demo
Single Page Demos
Screenshots
This is the package manager. You upload zip files here. Simply drag a file or click browse files to upload. IPPM will unpack those files in your uploads directory under ippm-packages. The uploaded packages are listed below. You can see each file in a package listed in the package block. Each file also has a link to the file. IPPM allows you to delete a package by clicking delete package.
It's recommended that you use the Custom HTML Block as the contents of your post. It's not required though. You can script and style from generated markup. Regardless, after you add your content, add the IPPM: Assets block on the page.
Click on the IPPM: Asset block under your content. To the right you'll have the ability to select a package. Once a package is selected, you'll see the associated CSS and JS with that package. These files will be executed with this post. You can change the order their executed in by dragging the files up or down. Click the "Enable module type" if you need a script to load as JavaScript module.
To select a package, type in the name of the package in the "Select a package" field. A list of matching packages will appear as you type.
The dependency manager allows you to enter urls to cdns that host JavaScript dependencies. It ultimately creates an import map for your JavaScript modules. Since import maps are new and not supported across all browsers, a IPPM includes a shim for them. In this screenshot we have one dependency, Google Lit.
As you can see, the Dependency Manager added an import map with Google Lit as an dependency.
FAQs
What’s the difference between the Dependency and Asset Managers?
The Dependency Manager is specifically for generating an import map. The Asset Manager is for including what CSS and JS gets executed and in what order.
Couldn’t I just add my assets to my theme?
You could but then you would have to customize the theme. :-) IPPM allows you to focus on easily integrating any prototype as an Interactive Post. This is especially useful if you have multiple Interactive Posts or your prototypes were developed by 3rd parties.
What is an import map?
Import Maps allow you to specify dependencies in a ES module with bare import specifiers. A bare import specifier is used when you import a library by only it's name, like import React from 'react'; Read more about it here.
What happens if I upload an existing package?
If you upload a package that already exists, IPPM will add the new files to that package and overwrite the existing files.