About the x-postpress category

directory · May 12, 2025, 11:48am

x-postpress: # x-postpress

A Web Component that fetches WordPress posts from the REST API based on attributes set on the element.

About

Built using LitElement and TypeScript
Supports Internet Explorer 11

Try

Demo the element on GitHub Pages
Exercise the element on CodeSandbox

Use

Add the Web Component to the project (unpkg and npm examples)
1. Load the custom element using a script tag:
```
<script
  src="https://unpkg.com/x-postpress"
  type="module"
>
</script>
```
2. Alternatively, add using npm:
```
npm i x-postpress
```
  Then import the module from another file:
```
import 'x-postpress'
```

Add the tag into the document and style using available CSS custom properties. Articles can be included with the provided slot element:

<style>
  ul {
    list-style-type: var(--ul-list-style-type, inherit);
  }

  x-postpress {
    --ul-list-style-type: none;
  }
</style>

<x-postpress
  apiHost="https://content.example.com"
  per_page="1"
>
  <div slot="articles">
    <article>
      <h1><a href="https://example.com/1970/01/01/slotted/">
        Article
      </a></h1>
      <h2>Thursday, 01 January 1970</h2>
      <p>Lorem ipsum dolor sit amet</p>
      <hr>
    </article>
  </div>
</x-postpress>

Misc

An Angular repository and unpkg examples are available for experimentation
Try using devtools to change the apiHost attribute within the x-postpress tag to render another REST API posts endpoint
If building an app with x-postpress, the included index.html checks the query string for parameters to override particular custom element attributes (example):
```
<a
  href="http://localhost:8081/?apiHost=https://content.example.com"
>
  example.com
</a>
```