Automattic / liveblog

Liveblogging done right. Using WordPress.
https://wordpress.org/plugins/liveblog/
308 stars 122 forks source link

Ability to customize entry meta markup #374

Open paulschreiber opened 6 years ago

paulschreiber commented 6 years ago

We would like to be able to customize the entry meta markup, through a PHP/HTML template and/or filters/actions.

Currently, the entry metadata is defined in JSX/React in EntryMeta.js

paulschreiber commented 6 years ago

I rewrote EntryMeta.js to do what I want. Ideally, I could make this type of change in my theme and not fork the plugin:

const EntryMeta = ({ entry, config }) => (
  <div className="livepress-update-outer-wrapper">
    {
      (entry.contributors && entry.contributors.length > 0) &&
      <div className="liveblog-meta-avatars">
        {
          entry.contributors.filter(x => x.id !== entry.author.id).map(contributor => (
            <a
              key={contributor.id}
              className="liveblog-meta-avatar"
              href={'/contributors/' + contributor.name.toLowerCase().replace(' ', '-') + '/'}
              dangerouslySetInnerHTML={{ __html: contributor.avatar }} />
          ))
        }
      </div>
    }
    <header className="liveblog-meta">
      {
        (entry.contributors && entry.contributors.length > 0) &&
        <div className="liveblog-meta-authors">
          {
            entry.contributors.filter(x => x.id !== entry.author.id).map(contributor => (
              <span className="liveblog-meta-author" key={contributor.id}><a href={'/contributors/' + contributor.name.toLowerCase().replace(' ', '-') + '/'}>{contributor.name}</a></span>
            ))
          }
        </div>
      }
      <span className="liveblog-meta-time" href={entry.share_link}>
        <abbr title={formattedTime(entry.entry_time, config.utc_offset, 'c')} className="liveblog-timestamp">{formattedTime(entry.entry_time, config.utc_offset, config.time_format)}</abbr>
      </span>
    </header>
  </div>
);
adamsilverstein commented 6 years ago

Another opportunity to consider adding JavaScript filtering here via wp.hooks, similar to the approach Gutenberg is experimentally using for extending blocks (see https://github.com/WordPress/gutenberg/blob/master/docs/extensibility/extending-blocks.md). Note that hooks can currently be used from npm: https://www.npmjs.com/package/@wordpress/hooks