EdwardBock

In addition to the Storybook for React setup, you'll also need to install these packages:

npm i -D @babel/core babel-loader css-loader style-loader

EdwardBock

<?php
namespace PublicFunctionOrg\WordPress\Theme\Sample;
interface ReadingTimeFeature{
  public function render($post_id);
}

EdwardBock

<?php
namespace PublicFunctionOrg\Theme\ReadingTimeSample;

// ...
function reading_time($post_id){
  if(function_exists('reading_time_render')){
    reading_time_render($post_id);
  }
}

EdwardBock

<?php

function reading_time_render($post_id){
  // https://medium.com/write-better-wordpress-code/do-not-use-post-meta-fec12a7661
  $db = new  \PublicFunctionOrg\WordPress\ReadingTime\Database();
  $reading_time = $db->get($postId);
  if(!$reading_time) return;
  
  // https://medium.com/write-better-wordpress-code/provide-overwritable-templates-from-your-plugin-c5205f8a3138
  $templates = new \PublicFunctionOrg\WordPress\Templates();

EdwardBock

import {registerBlockType} from '@wordpress/blocks';
import ServerSideRender from '@wordpress/server-side-render';

registerBlockType( 'public-function-org/reading-time', {
    title: "Reading time",
    icon: 'clock',
    category: 'common',
    edit: () => {
        return <ServerSideRender
          block="public-function-org/reading-times"

EdwardBock

<?php

// [reading_time]
// [reading_time post_id="..."]
add_shortcode( 'reading_time', function($atts){
	
  $a = shortcode_atts( array(
    'post_id' => false,
	), $atts );
	

EdwardBock

<?php

add_filter("the_content", function($content, $post){
  
  if ( is_singular() && in_the_loop() && is_main_query() ) {
    
    // https://gist.github.com/EdwardBock/fa659b67bcf4f568289d0c49c175f42b
    $add = reading_time_get_content($post->ID);
    
    return $add.$content; 

EdwardBock

import { registerPlugin } from "@wordpress/plugins";
import { PluginSidebarMoreMenuItem, PluginSidebar } from "@wordpress/edit-post";
import { TextControl } from "@wordpress/components";

import { useReadingTime } from "./reading-time-hooks.js";

const name = "reading-time-sidebar";

registerPlugin(
  "reading-time",

EdwardBock

import { registerPlugin } from "@wordpress/plugins";
import { PluginDocumentSettingPanel } from "@wordpress/edit-post";
import { TextControl } from "@wordpress/components";

import {useReadingTime} from "./reading-time-hooks.js";

registerPlugin(
  "reading-time",
  {
    render: ()=> {

EdwardBock

import { registerPlugin } from "@wordpress/plugins";
import { PluginPostStatusInfo } from "@wordpress/edit-post";
import { TextControl } from "@wordpress/components";

import {useReadingTime} from "./reading-time-hooks.js";

registerPlugin(
  'reading-time',
  {
    render: ()=> {