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
• 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 (from unpkg):

     <script type="module" src="https://unpkg.com/x-postpress"></script>
     

  2. Alternatively, try adding using the command line...

     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

• Other examples are available in a dedicated folder
• Try using the browser's devtools to change the apiUrl attribute within the x-postpress tag to render another REST API posts endpoint
• If using the included index.html, a link can be created to the page, and the custom element attributes can be overridden by including them in the query string (example):

  <a href="http://localhost:8081/?apiHost=https://content.example.com">example.com</a>