T(-) Countdown Gutenberg Test

This is a test for integrating T(-) Countdown with Gutenberg Blocks.
First, we need to tidy up how the Javascript is being used. Here is a basic countdown that uses a shortcode.

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
5
Seconds
0
0

Now let’s try a shortcode with a launch target of an external element.

This is a block with an id of ‘monkeymonk’


[tminus t="+10 secs" launchtarget="monkeymonk"]monkey is in spaceā€¦ space monkey![/tminus]

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
1
0
Years
0
0
Months
0
0
Weeks
0
0
Days
0
1
Hours
0
0
Minutes
0
0
Seconds
0
0

Print-Pro-Matic External CSS Test

Print-Pro-Matic allows loading in an external css file for the print view, rather than have to manually entered all definitions in to the Custom CSS area.

For example, this should load in a css file that gives the target element a lovely purpley dotted border:

[print-me css_url="https://spacedonkey.de/wp-content/uploads/2015/07/purpeat.css" target=".purpeoeater"]

Flyin’ Purple People Eater

Well, bless my soul rock ‘n roll flying’ purple people eater
Pigeon-toed under-growed flyin’ purple people eater
One-eyed one-horned it was a people eater
What a sight to see!

T-Countdown Cloud City Style

[tminus t="12-12-2014 08:00:00" style="cloud-city"]

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Collapse-Pro-Matic Arrows

Default/Left Arrow:
[expand title="arrow to the left"]<-- see that, that's left[/expand]]
[expand title="arrow to the left"]<-- see that, that's left[/expand] Right Arrow: [[expand title="arrow to the right" trigclass="arrowright"]checkout what is to the right -->[/expand]

arrow to the right
checkout what is to the right –>

No Arrow:
[expand title="no arrow to be found" trigclass="noarrow"]the arrow is not to be found[/expand]

no arrow to be found
the arrow is not to be found

Both Left & Right Arrow:
This method requires the extra-trigger feature of Collapse-Pro-Matic and must be built using the roll-your-own method and a bit of css:

Magic CSS

Place the following css in the collapse-o-matic (or collapse-pro-matic) plugin options page, under Custom Style:

.magic_beans {
display: inline;
float: left;
margin-right: 1.2em;
}

.clear {
clear: both;
}

Roll-Your-Own Method w/ Magic CSS

<div class="collapseomatic magic_beans" id="doublearrow" title="double arrows!">double arrows!</div><div class="collapseomatic magic_beans" id="extra-doublearrow"></div>
<div id="target-doublearrow" class="collapseomatic_content clear"><--to the left, to the right--></div>

double arrows!
<--to the left, to the right-->