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>