Create a Countdown timer block for the [bw_countdown] shortcode

bobbingwide commented 6 years ago

Implement a countdown timer block for the [bw_countdown] shortcode.

Requirement

Implement a Countdown block that will demonstrate...

Using different control types for different parameters
A block with JavaScript, albeit still being supported as a shortcode.

Parameter	Control type
until	Date picker
since	Date picker
description	text or textarea
expiryUrl	URL field
expiryText	text
Format	text

Proposed solution

Minimum logic for the first version.

Get it to work with text fields.
Create examples for:
until - WordPress’s next anniversary
since Gutenberg first appeared on wordpress.org

bobbingwide commented 6 years ago

Examples

[bw_countdown since="2017-06-17" description="Days since Gutenberg first appeared on WordPress.org" format="D"]

bobbingwide commented 6 years ago

The block currently looks like this.

When displayed we get.

bobbingwide commented 6 years ago

I don't really understand why I needed to do the following to avoid getting Warnings from react.

Add key="something" to every tag. This eventually resolved

Warning: Each child in an array or iterator should have a unique "key" prop.

Set a default value for each attribute. This resolved Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa)

And once those have been explained then perhaps we could consider the other stumbling blocks.

How do I code this so that it's only coded once

var atts = props.attributes;
var chatts = '[bw_countdown';   
for (var key of Object.keys( atts )) {
  var value = atts[key];
  if ( value ) {
    chatts = chatts + " " + key + "=\"" + value + '"';
  }
}
chatts = chatts + ']';

How do I generalise this routine so that all I need is the shortcode parameter structure and the block builds itself.

so we can have just one onChange function that can determine which internal value to set
to support a variety of field types.

For examples see: https://www.oik-plugins.com/oik_shortcodes/bw_countdown/ https://www.oik-plugins.com/oik_shortcodes/bw_pages/

bobbingwide commented 6 years ago

Note. The attribute names are case sensitive. When I entered a value for Expiry Text re-editing the post caused the block to break. Changing the attribute name from expiryText to expirytext resolves the issue.

I haven't yet implemented expiryUrl.

bobbingwide commented 5 years ago

This block doesn't work with Gutenberg 4.0.0.

None of the Inspector controls are displayed.
The source is using functions deprecated between 2.9.2 and 4.0

There are many messages in the console... the first coming from the oik-css block.

Uncaught TypeError: withInstanceId is not a function
at eval (index.js?2848:74)
at Object.<anonymous> (editor.blocks.js?ver=1540200657:1645)
at __webpack_require__ (editor.blocks.js?ver=1540200657:20)
at eval (index.js?8193:1)
at Object.<anonymous> (editor.blocks.js?ver=1540200657:588)
at __webpack_require__ (editor.blocks.js?ver=1540200657:20)
at editor.blocks.js?ver=1540200657:63
at editor.blocks.js?ver=1540200657:66

bobbingwide commented 5 years ago

Got a message when using the Countdown block

Warning: A non-numeric value encountered in C:\apache\htdocs\wordpress\wp-content\plugins\oik\includes\bw_jquery.inc on line 13

bobbingwide commented 2 years ago

The Countdown block is now delivered in oik. See https://github.com/bobbingwide/oik/issues/138

bobbingwide / oik-blocks