Directory

← Back

x-postpress

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

Author

Rating

Popularity

<100

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>
    

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @polymer/app-layout#^3.0.2
  • @polymer/polymer#^3.1.0
  • @webcomponents/webcomponentsjs#^2.2.4
  • fetch-polyfill#^0.8.2
  • lit-element#^2.0.0-rc.5
  • lit-html#^1.0.0-rc.2
  • pwa-helpers#^0.9.0
Released
2019-01-29
Maturity
IMPORTED
License
BSD 3-clause "New" or "Revised" License

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent

x-postpress - Vaadin Add-on Directory

A Web Component showing the "latest posts" using a WordPress REST API x-postpress - Vaadin Add-on Directory
# x-postpress A Web Component that fetches [WordPress](https://wordpress.org/) posts [from the REST API](https://developer.wordpress.org/rest-api/reference/posts/#list-posts) based on attributes set on the element. ## About * Built using [LitElement](https://lit-element.polymer-project.org/) and [TypeScript](https://www.typescriptlang.org/) * [Supports Internet Explorer 11](https://github.com/kherrick/x-postpress/tree/master/build/es5-bundled) ## Try * [Demo the element](https://kherrick.github.io/x-postpress/) on GitHub Pages * [Exercise the element](https://codesandbox.io/s/5yj96r0n9k) on CodeSandbox ## Use * Add the Web Component to the project (unpkg and npm examples) 1. Load the custom element using a `script` tag: ```html ``` 2. Alternatively, add using `npm`: ```bash npm i x-postpress ``` Then import the module from another file: ```javascript 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: ```html

Article

Thursday, 01 January 1970

Lorem ipsum dolor sit amet


``` ## Misc * An [Angular repository](https://github.com/kherrick/angular-x-postpress) and [unpkg examples](https://github.com/kherrick/x-postpress/tree/master/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](index.html) checks the query string for parameters to override particular custom element attributes (example): ```html example.com ```
postpress logo
Sauce Labs build status
Travis CI build status
published on webcomponents.org
View on NPM
View on GitHub

x-postpress version 1.0.0
### Dependencies * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.0.1
### Dependencies * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.1.0
### Dependencies * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.1.1
### Dependencies * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.1.2
### Dependencies * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.2.0
### Dependencies * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.2.1
### Dependencies * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.2.2
### Dependencies * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.2.3
### Dependencies * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.2.5
### Dependencies * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.2.6
### Dependencies * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.2.7
### Dependencies * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.3.0
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.4.0
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.4.2
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/lit-element#^0.6.5 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.0.0 * fetch-polyfill#^0.8.2 * lit-html#^1.0.0-rc.1 * pwa-helpers#^0.9.0

x-postpress version 1.4.3
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.3 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.2 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 1.4.4
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.3 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.2 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 1.4.5
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.3 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.2 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 1.4.6
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.4 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.2 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 2.0.0
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.4 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.3 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 2.0.1
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.4 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.3 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 2.0.2
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.4 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.3 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 2.0.3
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.4 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.3 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 2.1.0
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.4 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.5 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 2.1.2
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.4 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.5 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 2.1.3
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.4 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.5 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 2.1.5
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.4 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.5 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 2.1.6
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.4 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.5 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 2.1.7
### Dependencies * @polymer/app-layout#^3.0.2 * @polymer/polymer#^3.1.0 * @webcomponents/webcomponentsjs#^2.2.4 * fetch-polyfill#^0.8.2 * lit-element#^2.0.0-rc.5 * lit-html#^1.0.0-rc.2 * pwa-helpers#^0.9.0

x-postpress version 2.1.8
### 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

x-postpress version 2.1.9
### 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

x-postpress 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

Online