A Web Component showing the "latest posts" using a WordPress REST API

x-postpress

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

About

Try

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>
    

Install

Link to this version
ImportedReleased 06 March 2019BSD 3-clause "New" or "Revised" License
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install x-postpress"@2.1.10"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.1.10

Dependencies

  • @polymer/app-layout#^3.0.2
  • @polymer/polymer#^3.1.0
  • @webcomponents/webcomponentsjs#^2.2.7
  • fetch-polyfill#^0.8.2
  • lit-element#^2.0.1
  • lit-html#^1.0.0
  • pwa-helpers#^0.9.0