From 1580fc5e6f0ca863bd2fbc1f28eb3aede655508f Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Fri, 14 Aug 2020 17:00:14 -0400 Subject: [PATCH 1/7] Details block --- blocks/details/editor.scss | 1 + blocks/details/index.php | 9 ++++ blocks/details/src/block.json | 13 +++++ blocks/details/src/edit.js | 92 +++++++++++++++++++++++++++++++++++ blocks/details/src/icon.js | 12 +++++ blocks/details/src/index.js | 33 +++++++++++++ blocks/details/src/save.js | 16 ++++++ blocks/details/style.scss | 1 + bundler/bundles/details.json | 9 ++++ src/index.js | 2 + 10 files changed, 188 insertions(+) create mode 100644 blocks/details/editor.scss create mode 100644 blocks/details/index.php create mode 100644 blocks/details/src/block.json create mode 100644 blocks/details/src/edit.js create mode 100644 blocks/details/src/icon.js create mode 100644 blocks/details/src/index.js create mode 100644 blocks/details/src/save.js create mode 100644 blocks/details/style.scss create mode 100644 bundler/bundles/details.json diff --git a/blocks/details/editor.scss b/blocks/details/editor.scss new file mode 100644 index 00000000..1fe93d09 --- /dev/null +++ b/blocks/details/editor.scss @@ -0,0 +1 @@ +/* Editor styles */ diff --git a/blocks/details/index.php b/blocks/details/index.php new file mode 100644 index 00000000..ad6ce843 --- /dev/null +++ b/blocks/details/index.php @@ -0,0 +1,9 @@ + 'block-experiments', + 'style' => 'block-experiments', + 'editor_style' => 'block-experiments-editor', + ] ); +} ); diff --git a/blocks/details/src/block.json b/blocks/details/src/block.json new file mode 100644 index 00000000..1d6cda81 --- /dev/null +++ b/blocks/details/src/block.json @@ -0,0 +1,13 @@ +{ + "name": "a8c/details", + "category": "layout", + "attributes": { + "initialOpen": { + "type": "boolean", + "default": false + }, + "summaryContent": { + "type": "string" + } + } +} \ No newline at end of file diff --git a/blocks/details/src/edit.js b/blocks/details/src/edit.js new file mode 100644 index 00000000..f358b9db --- /dev/null +++ b/blocks/details/src/edit.js @@ -0,0 +1,92 @@ +/** + * WordPress dependencies + */ +import { + InnerBlocks, + RichText, + InspectorControls, +} from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { + ToggleControl, + Panel, + PanelBody, + PanelRow, +} from '@wordpress/components'; +import { useEffect, useRef } from '@wordpress/element'; +import { SPACE } from '@wordpress/keycodes'; + +export default function DetalsEdit( { + attributes, + className, + clientId, + isSelected, + setAttributes, +} ) { + const summaryRef = useRef( null ); + + const keyUpListener = ( e ) => { + if ( e.keyCode === SPACE ) { + e.preventDefault(); + } + }; + + const clickListener = ( e ) => e.preventDefault(); + + useEffect( () => { + if ( ! summaryRef.current ) { + return; + } + + summaryRef.current.addEventListener( 'keyup', keyUpListener ); + summaryRef.current.addEventListener( 'click', clickListener ); + return () => { + summaryRef.current.removeEventListener( 'keyup', keyUpListener ); + summaryRef.current.removeEventListener( 'click', clickListener ); + }; + }, [ summaryRef.current ] ); + + const isInnerBlockSelected = useSelect( + ( select ) => + select( 'core/block-editor' ).hasSelectedInnerBlock( clientId ), + [ clientId ] + ); + + const showInnerBlocks = + attributes.initialOpen || isSelected || isInnerBlockSelected; + + return ( + <> + + + + + + setAttributes( { initialOpen } ) + } + checked={ attributes.initialOpen } + /> + + + + +
+ + setAttributes( { summaryContent } ) + } + ref={ summaryRef } + placeholder={ __( 'Write a summary…' ) } + keepPlaceholderOnFocus + aria-label={ __( 'Summary text' ) } + /> + +
+ + ); +} diff --git a/blocks/details/src/icon.js b/blocks/details/src/icon.js new file mode 100644 index 00000000..ef9d3c95 --- /dev/null +++ b/blocks/details/src/icon.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const details = ( + + + +); + +export default details; diff --git a/blocks/details/src/index.js b/blocks/details/src/index.js new file mode 100644 index 00000000..cf140188 --- /dev/null +++ b/blocks/details/src/index.js @@ -0,0 +1,33 @@ +/** + * WordPress dependencies + */ +import { registerBlockType } from '@wordpress/blocks' +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import metadata from './block.json'; +import save from './save'; +import icon from './icon'; + +const { name, category, attributes } = metadata; + +export { metadata, name }; + +export const settings = { + title: __( 'Details' ), + description: __( 'Create a toggle to show and hide content.' ), + icon, + category, + edit, + save, + // details and summary are not translated because they are the HTML tags + keywords: [ 'details', 'summary', __( 'faq' ), __( 'spoiler' ) ], + attributes, +}; + +export function registerBlock() { + registerBlockType( name, settings ); +} \ No newline at end of file diff --git a/blocks/details/src/save.js b/blocks/details/src/save.js new file mode 100644 index 00000000..c3c1d2d0 --- /dev/null +++ b/blocks/details/src/save.js @@ -0,0 +1,16 @@ +/** + * WordPress dependencies + */ +import { InnerBlocks, RichText } from '@wordpress/block-editor'; + +export default ( { attributes } ) => { + return ( +
+ + +
+ ); +}; diff --git a/blocks/details/style.scss b/blocks/details/style.scss new file mode 100644 index 00000000..08ae1dff --- /dev/null +++ b/blocks/details/style.scss @@ -0,0 +1 @@ +/* Front end styles */ diff --git a/bundler/bundles/details.json b/bundler/bundles/details.json new file mode 100644 index 00000000..141c110b --- /dev/null +++ b/bundler/bundles/details.json @@ -0,0 +1,9 @@ +{ + "blocks": [ + "details" + ], + "version": "0.0.1", + "name": "Details Block", + "description": "Create a toggle to show and hide content", + "resource": "a8c-details" +} diff --git a/src/index.js b/src/index.js index c9317974..fdfb32ea 100644 --- a/src/index.js +++ b/src/index.js @@ -29,6 +29,7 @@ import * as motionBackgroundBlock from '../blocks/motion-background/src'; import * as starscapeBlock from '../blocks/starscape/src'; import * as wavesBlock from '../blocks/waves/src'; import * as bookBlock from '../blocks/book/src'; +import * as detailsBlock from '../blocks/details/src'; // Instantiate the blocks, adding them to our block category bauhausCentenaryBlock.registerBlock(); @@ -38,3 +39,4 @@ motionBackgroundBlock.registerBlock(); starscapeBlock.registerBlock(); wavesBlock.registerBlock(); bookBlock.registerBlock(); +detailsBlock.registerBlock(); From 7217fb451b24cf805d57dd640463637fb06a4286 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Thu, 20 Aug 2020 16:42:19 -0400 Subject: [PATCH 2/7] Added flip book and modal styles --- blocks/details/editor.scss | 5 ++ blocks/details/src/index.js | 19 +++++- blocks/details/style.scss | 123 ++++++++++++++++++++++++++++++++++++ editor.scss | 1 + style.scss | 1 + 5 files changed, 147 insertions(+), 2 deletions(-) diff --git a/blocks/details/editor.scss b/blocks/details/editor.scss index 1fe93d09..2541caf2 100644 --- a/blocks/details/editor.scss +++ b/blocks/details/editor.scss @@ -1 +1,6 @@ /* Editor styles */ +.wp-block-details { + summary .rich-text { + display: inline; + } +} \ No newline at end of file diff --git a/blocks/details/src/index.js b/blocks/details/src/index.js index cf140188..193603c3 100644 --- a/blocks/details/src/index.js +++ b/blocks/details/src/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { registerBlockType } from '@wordpress/blocks' +import { registerBlockType } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; /** @@ -26,8 +26,23 @@ export const settings = { // details and summary are not translated because they are the HTML tags keywords: [ 'details', 'summary', __( 'faq' ), __( 'spoiler' ) ], attributes, + styles: [ + { + name: 'disclosure', + label: __( 'Open / Close' ), + isDefault: true, + }, + { + name: 'flipcard', + label: __( 'Flip Card' ), + }, + { + name: 'modal', + label: __( 'Modal' ), + }, + ], }; export function registerBlock() { registerBlockType( name, settings ); -} \ No newline at end of file +} diff --git a/blocks/details/style.scss b/blocks/details/style.scss index 08ae1dff..c8ca6a8b 100644 --- a/blocks/details/style.scss +++ b/blocks/details/style.scss @@ -1 +1,124 @@ /* Front end styles */ +.wp-block-details { + &.is-style-flipcard { + margin-bottom: 32px; + + // // .card__face { + // details { + cursor: pointer; + transform-style: preserve-3d; + perspective: 300px; + overflow: hidden; + + // // .card__front, + // // .card__back { + summary, + :not( summary ) { + position: relative; + padding: 16px 48px 16px 16px; + } + // } + + // // .card__front { + summary { + background: #efefef; + } + + // // .card__back { + .block-editor-inner-blocks { + max-height: 0; + padding: 0; + overflow: hidden; + background: #efefef; + + transition: all 0.4s ease; + transform: rotateX( -180deg ); + transform-origin: top center; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + opacity: 0; + } + + // // &.is-unfolded .card__back { + // details[ open ] :not( summary ) { + &[open] .block-editor-inner-blocks { + max-height: none; + overflow: visible; + padding: 16px 48px 16px 16px; + visibility: visible; + transform: rotateX( 0deg ); + opacity: 1; + } + + // .card__expand-icon { + // .card__expand-icon { + // position: absolute; + // top: 16px; + // right: 12px; + + // svg { + // fill: currentColor; + // transition: transform .2s ease; + // } + // } + + // &.is-unfolded .card__expand-icon svg { + // transform: rotate(180deg); + // } + } + + &.is-style-modal { + summary { + width: 10em; + text-align: center; + font-weight: bold; + padding: 1em 2em; + background: DEEPPINK; + border-radius: 3em; + color: white; + cursor: pointer; + } + + :not( summary ) { + width: 20em; + border: 2px solid black; + padding: 1em 2em; + position: fixed; + width: 360px; + height: 240px; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + background: white; + z-index: 3; + box-shadow: 10px 10px 10px DIMGRAY; + } + } + + &[open].is-style-modal { + summary::after { + content: '×'; + font-size: 28pt; + position: fixed; + right: calc( 50vw - 360px / 2 - 2em ); + top: calc( 50vh - 240px / 2 - 2em ); + padding: 5pt 10pt; + z-index: 9; + } + + summary::before { + content: ''; + display: block; + width: 100vw; + height: 100vh; + background: black; + position: fixed; + top: 0; + left: 0; + opacity: 0.5; + z-index: 1; + } + } +} diff --git a/editor.scss b/editor.scss index 64623338..e30c40cc 100644 --- a/editor.scss +++ b/editor.scss @@ -6,3 +6,4 @@ @import './blocks/starscape/editor.scss'; @import './blocks/waves/editor.scss'; @import './blocks/book/editor.scss'; +@import './blocks/details/editor.scss'; diff --git a/style.scss b/style.scss index 1587de4a..6cb21273 100644 --- a/style.scss +++ b/style.scss @@ -6,3 +6,4 @@ @import './blocks/starscape/style.scss'; @import './blocks/waves/style.scss'; @import './blocks/book/style.scss'; +@import './blocks/details/style.scss'; From ac6cb1e844992f053f2d7b13ae875eb162eeb542 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Fri, 21 Aug 2020 14:09:45 -0400 Subject: [PATCH 3/7] Selector typo --- blocks/details/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/details/style.scss b/blocks/details/style.scss index c8ca6a8b..16ee586f 100644 --- a/blocks/details/style.scss +++ b/blocks/details/style.scss @@ -1,5 +1,5 @@ /* Front end styles */ -.wp-block-details { +.wp-block-a8c-details { &.is-style-flipcard { margin-bottom: 32px; From d62d5d5dc626bccee284619650ff53cd7b1fa80e Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 27 Aug 2020 11:29:17 +0200 Subject: [PATCH 4/7] Get basic flipping working. --- blocks/details/style.scss | 77 +++++++++++++-------------------------- 1 file changed, 25 insertions(+), 52 deletions(-) diff --git a/blocks/details/style.scss b/blocks/details/style.scss index 16ee586f..e0ab7c94 100644 --- a/blocks/details/style.scss +++ b/blocks/details/style.scss @@ -1,72 +1,45 @@ -/* Front end styles */ +$bgcolor: #efefef; // Be nice if this was customizable via a background color property. + +@keyframes open-card { + 0% { + transform: rotateX(-180deg); + opacity: 0; + } + 100% { + transform: rotateX(0deg); + opacity: 1; + } +} + +// Front end styles .wp-block-a8c-details { &.is-style-flipcard { - margin-bottom: 32px; + margin-bottom: 1.5em; - // // .card__face { - // details { - cursor: pointer; + // Enable 3D perspective. transform-style: preserve-3d; perspective: 300px; - overflow: hidden; - // // .card__front, - // // .card__back { - summary, - :not( summary ) { - position: relative; - padding: 16px 48px 16px 16px; - } - // } - // // .card__front { + // Card front-face. summary { - background: #efefef; + background: $bgcolor; } - // // .card__back { - .block-editor-inner-blocks { - max-height: 0; - padding: 0; - overflow: hidden; - background: #efefef; - - transition: all 0.4s ease; - transform: rotateX( -180deg ); + // Back-face when closed. + > *:not(summary) { + background: $bgcolor; transform-origin: top center; - -webkit-backface-visibility: hidden; backface-visibility: hidden; - opacity: 0; } - // // &.is-unfolded .card__back { - // details[ open ] :not( summary ) { - &[open] .block-editor-inner-blocks { - max-height: none; - overflow: visible; - padding: 16px 48px 16px 16px; - visibility: visible; - transform: rotateX( 0deg ); - opacity: 1; + // Back-face when opened. + &[open] > *:not(summary) { + animation: open-card .4s ease; } - - // .card__expand-icon { - // .card__expand-icon { - // position: absolute; - // top: 16px; - // right: 12px; - - // svg { - // fill: currentColor; - // transition: transform .2s ease; - // } - // } - - // &.is-unfolded .card__expand-icon svg { - // transform: rotate(180deg); - // } } + &.is-style-modal { summary { width: 10em; From 29b33567ddec3d3ab1f8059977ed2fb1d3583bb1 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 27 Aug 2020 11:40:33 +0200 Subject: [PATCH 5/7] Some tweaks and an unfortunate realization. --- blocks/details/style.scss | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/blocks/details/style.scss b/blocks/details/style.scss index e0ab7c94..7b414d63 100644 --- a/blocks/details/style.scss +++ b/blocks/details/style.scss @@ -1,3 +1,5 @@ +// Front end and editor styles. + $bgcolor: #efefef; // Be nice if this was customizable via a background color property. @keyframes open-card { @@ -11,8 +13,9 @@ $bgcolor: #efefef; // Be nice if this was customizable via a background color pr } } -// Front end styles .wp-block-a8c-details { + + // 3D flip-card style. &.is-style-flipcard { margin-bottom: 1.5em; @@ -24,22 +27,37 @@ $bgcolor: #efefef; // Be nice if this was customizable via a background color pr // Card front-face. summary { background: $bgcolor; + padding: 1em; + + // Allows a focus style on the summary to be uncropped. + position: relative; } - // Back-face when closed. + // Back-face regardless of opened or closed. > *:not(summary) { background: $bgcolor; transform-origin: top center; backface-visibility: hidden; + + // Some baseline left and right padding. + padding-left: 1em; + padding-right: 1em; + } + + // Neutralize the top margin of the first innerblock, add padding. + > summary+*, // Frontend + > .block-editor-inner-blocks > .block-editor-block-list__layout > * { // Editor + margin-top: 0; + padding-top: 1em; } // Back-face when opened. &[open] > *:not(summary) { - animation: open-card .4s ease; + animation: open-card .2s ease; } } - + // Modal style. &.is-style-modal { summary { width: 10em; From a9880c333aba8002e3bd2401822c94c0cf842f4b Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Thu, 3 Sep 2020 15:34:13 -0400 Subject: [PATCH 6/7] Incremental commit - working on Modal styling --- blocks/details/editor.scss | 37 ++++++++++++++++++++++++++++++++++++- blocks/details/src/edit.js | 4 +++- blocks/details/src/save.js | 4 +++- blocks/details/style.scss | 13 +++++++++++-- 4 files changed, 53 insertions(+), 5 deletions(-) diff --git a/blocks/details/editor.scss b/blocks/details/editor.scss index 2541caf2..134e9816 100644 --- a/blocks/details/editor.scss +++ b/blocks/details/editor.scss @@ -1,6 +1,41 @@ /* Editor styles */ -.wp-block-details { +.wp-block-a8c-details { summary .rich-text { display: inline; } + + &.is-style-modal { + .wp-block-a8c-details__content { + width: auto; + height: auto; + position: static; + // // width: 20em; + // // border: 2px solid black; + // // padding: 1em 2em; + // position: static; + // width: 360px; + // height: 240px; + // top: 0; + // left: 0; + // right: 0; + // bottom: 0; + // // margin: auto; + // background: white; + // z-index: 3; + // // box-shadow: 10px 10px 10px DIMGRAY; + + } + } + + &[open].is-style-modal { + // No X in the editor + summary::after { + display: none; + } + + // Don't blur + summary::before { + display: none; + } + } } \ No newline at end of file diff --git a/blocks/details/src/edit.js b/blocks/details/src/edit.js index f358b9db..fe31c5db 100644 --- a/blocks/details/src/edit.js +++ b/blocks/details/src/edit.js @@ -85,7 +85,9 @@ export default function DetalsEdit( { keepPlaceholderOnFocus aria-label={ __( 'Summary text' ) } /> - +
+ +
); diff --git a/blocks/details/src/save.js b/blocks/details/src/save.js index c3c1d2d0..38e90147 100644 --- a/blocks/details/src/save.js +++ b/blocks/details/src/save.js @@ -10,7 +10,9 @@ export default ( { attributes } ) => { tagName="summary" value={ attributes.summaryContent } /> - +
+ +
); }; diff --git a/blocks/details/style.scss b/blocks/details/style.scss index 7b414d63..338529ab 100644 --- a/blocks/details/style.scss +++ b/blocks/details/style.scss @@ -26,7 +26,7 @@ $bgcolor: #efefef; // Be nice if this was customizable via a background color pr // Card front-face. summary { - background: $bgcolor; + background: $bgcolor; padding: 1em; // Allows a focus style on the summary to be uncropped. @@ -68,12 +68,19 @@ $bgcolor: #efefef; // Be nice if this was customizable via a background color pr border-radius: 3em; color: white; cursor: pointer; + list-style: none; + } + + // This does the same as list-style: none; in Chrome + summary::-webkit-details-marker { + display: none; } - :not( summary ) { + .wp-block-a8c-details__content { width: 20em; border: 2px solid black; padding: 1em 2em; + // TODO: The fixed height (and probably width) breaks with longer blocks position: fixed; width: 360px; height: 240px; @@ -89,6 +96,7 @@ $bgcolor: #efefef; // Be nice if this was customizable via a background color pr } &[open].is-style-modal { + // TODO figure out how to get the X placed to the right of the non-fixed modal summary::after { content: '×'; font-size: 28pt; @@ -111,5 +119,6 @@ $bgcolor: #efefef; // Be nice if this was customizable via a background color pr opacity: 0.5; z-index: 1; } + } } From 1e34533339ff58fb3598f2a3cb851f394a0e8936 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Thu, 17 Sep 2020 16:23:41 -0400 Subject: [PATCH 7/7] Remove modal --- blocks/details/editor.scss | 37 +-------------------- blocks/details/src/index.js | 4 --- blocks/details/style.scss | 66 +------------------------------------ 3 files changed, 2 insertions(+), 105 deletions(-) diff --git a/blocks/details/editor.scss b/blocks/details/editor.scss index 134e9816..625fad40 100644 --- a/blocks/details/editor.scss +++ b/blocks/details/editor.scss @@ -3,39 +3,4 @@ summary .rich-text { display: inline; } - - &.is-style-modal { - .wp-block-a8c-details__content { - width: auto; - height: auto; - position: static; - // // width: 20em; - // // border: 2px solid black; - // // padding: 1em 2em; - // position: static; - // width: 360px; - // height: 240px; - // top: 0; - // left: 0; - // right: 0; - // bottom: 0; - // // margin: auto; - // background: white; - // z-index: 3; - // // box-shadow: 10px 10px 10px DIMGRAY; - - } - } - - &[open].is-style-modal { - // No X in the editor - summary::after { - display: none; - } - - // Don't blur - summary::before { - display: none; - } - } -} \ No newline at end of file +} diff --git a/blocks/details/src/index.js b/blocks/details/src/index.js index 193603c3..8e819e4a 100644 --- a/blocks/details/src/index.js +++ b/blocks/details/src/index.js @@ -36,10 +36,6 @@ export const settings = { name: 'flipcard', label: __( 'Flip Card' ), }, - { - name: 'modal', - label: __( 'Modal' ), - }, ], }; diff --git a/blocks/details/style.scss b/blocks/details/style.scss index 338529ab..b96702b0 100644 --- a/blocks/details/style.scss +++ b/blocks/details/style.scss @@ -37,6 +37,7 @@ $bgcolor: #efefef; // Be nice if this was customizable via a background color pr > *:not(summary) { background: $bgcolor; transform-origin: top center; + -webkit-backface-visibility: hidden; backface-visibility: hidden; // Some baseline left and right padding. @@ -56,69 +57,4 @@ $bgcolor: #efefef; // Be nice if this was customizable via a background color pr animation: open-card .2s ease; } } - - // Modal style. - &.is-style-modal { - summary { - width: 10em; - text-align: center; - font-weight: bold; - padding: 1em 2em; - background: DEEPPINK; - border-radius: 3em; - color: white; - cursor: pointer; - list-style: none; - } - - // This does the same as list-style: none; in Chrome - summary::-webkit-details-marker { - display: none; - } - - .wp-block-a8c-details__content { - width: 20em; - border: 2px solid black; - padding: 1em 2em; - // TODO: The fixed height (and probably width) breaks with longer blocks - position: fixed; - width: 360px; - height: 240px; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; - background: white; - z-index: 3; - box-shadow: 10px 10px 10px DIMGRAY; - } - } - - &[open].is-style-modal { - // TODO figure out how to get the X placed to the right of the non-fixed modal - summary::after { - content: '×'; - font-size: 28pt; - position: fixed; - right: calc( 50vw - 360px / 2 - 2em ); - top: calc( 50vh - 240px / 2 - 2em ); - padding: 5pt 10pt; - z-index: 9; - } - - summary::before { - content: ''; - display: block; - width: 100vw; - height: 100vh; - background: black; - position: fixed; - top: 0; - left: 0; - opacity: 0.5; - z-index: 1; - } - - } }