Last active
February 22, 2024 16:02
-
-
Save m-muhsin/d20b21c3765e5b913cd39b05a54b89b4 to your computer and use it in GitHub Desktop.
Markup for the mini stopwatch app using the WordPress block editor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- wp:group {"className":"stopwatch","layout":{"type":"constrained","contentSize":"400px"}} --> | |
<div class="wp-block-group stopwatch"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}},"border":{"radius":"15px"}},"backgroundColor":"accent-5","layout":{"type":"constrained","contentSize":"400px"}} --> | |
<div class="wp-block-group has-accent-5-background-color has-background" style="border-radius:15px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} --> | |
<div class="wp-block-group"><!-- wp:outermost/icon-block {"iconName":"wordpress-swatch"} --> | |
<div class="wp-block-outermost-icon-block"><div class="icon-container" style="width:48px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 17.7c.4.5.8.9 1.2 1.2l1.1-1.4c-.4-.3-.7-.6-1-1L5 17.7zM5 6.3l1.4 1.1c.3-.4.6-.7 1-1L6.3 5c-.5.4-.9.8-1.3 1.3zm.1 7.8l-1.7.5c.2.6.4 1.1.7 1.6l1.5-.8c-.2-.4-.4-.8-.5-1.3zM4.8 12v-.7L3 11.1v1.8l1.7-.2c.1-.2.1-.5.1-.7zm3 7.9c.5.3 1.1.5 1.6.7l.5-1.7c-.5-.1-.9-.3-1.3-.5l-.8 1.5zM19 6.3c-.4-.5-.8-.9-1.2-1.2l-1.1 1.4c.4.3.7.6 1 1L19 6.3zm-.1 3.6l1.7-.5c-.2-.6-.4-1.1-.7-1.6l-1.5.8c.2.4.4.8.5 1.3zM5.6 8.6l-1.5-.8c-.3.5-.5 1-.7 1.6l1.7.5c.1-.5.3-.9.5-1.3zm2.2-4.5l.8 1.5c.4-.2.8-.4 1.3-.5l-.5-1.7c-.6.2-1.1.4-1.6.7zm8.8 13.5l1.1 1.4c.5-.4.9-.8 1.2-1.2l-1.4-1.1c-.2.3-.5.6-.9.9zm1.8-2.2l1.5.8c.3-.5.5-1.1.7-1.6l-1.7-.5c-.1.5-.3.9-.5 1.3zm2.6-4.3l-1.7.2v1.4l1.7.2V12v-.9zM11.1 3l.2 1.7h1.4l.2-1.7h-1.8zm3 2.1c.5.1.9.3 1.3.5l.8-1.5c-.5-.3-1.1-.5-1.6-.7l-.5 1.7zM12 19.2h-.7l-.2 1.8h1.8l-.2-1.7c-.2-.1-.5-.1-.7-.1zm2.1-.3l.5 1.7c.6-.2 1.1-.4 1.6-.7l-.8-1.5c-.4.2-.8.4-1.3.5z"></path></svg></div></div> | |
<!-- /wp:outermost/icon-block --> | |
<!-- wp:heading {"className":"stopwatch__time","uid":"gradient-text-26316"} --> | |
<h2 class="wp-block-heading stopwatch__time">00:00:00:000</h2> | |
<!-- /wp:heading --></div> | |
<!-- /wp:group --> | |
<!-- wp:group {"className":"stopwatch__controls","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} --> | |
<div class="wp-block-group stopwatch__controls"><!-- wp:buttons {"className":"stopwatch__buttons"} --> | |
<div class="wp-block-buttons stopwatch__buttons"><!-- wp:button {"backgroundColor":"accent-4","className":"stopwatch__button stopwatch__button\u002d\u002dstart is-style-outline"} --> | |
<div class="wp-block-button stopwatch__button stopwatch__button--start is-style-outline"><a class="wp-block-button__link has-accent-4-background-color has-background wp-element-button">Start</a></div> | |
<!-- /wp:button --> | |
<!-- wp:button {"backgroundColor":"base-3","className":"stopwatch__button stopwatch__button\u002d\u002dstop is-style-outline"} --> | |
<div class="wp-block-button stopwatch__button stopwatch__button--stop is-style-outline"><a class="wp-block-button__link has-base-3-background-color has-background wp-element-button">Pause</a></div> | |
<!-- /wp:button --> | |
<!-- wp:button {"backgroundColor":"accent-3","className":"stopwatch__button stopwatch__button\u002d\u002dreset is-style-outline"} --> | |
<div class="wp-block-button stopwatch__button stopwatch__button--reset is-style-outline"><a class="wp-block-button__link has-accent-3-background-color has-background wp-element-button">Reset</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:group --></div> | |
<!-- /wp:group --></div> | |
<!-- /wp:group --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment