From fccfad2c55c8d4f8d48e79cb47cc6efc3bbf26e1 Mon Sep 17 00:00:00 2001 From: Steve Ross Date: Thu, 5 Feb 2026 11:59:32 +0000 Subject: [PATCH] article block: more core block styles --- web/app/themes/badegg/app/blocks.php | 13 ++++++++++ .../resources/css/components/_button.scss | 2 +- .../resources/css/components/_forms.scss | 2 +- .../badegg/resources/css/global/_fonts.scss | 3 --- .../resources/css/global/_typography.scss | 2 +- .../resources/css/global/_variables.scss | 1 + .../css/global/framework/_normalise.scss | 5 ++++ .../css/global/variables/_fonts.scss | 2 ++ web/app/themes/badegg/resources/js/editor.js | 26 +++++++++++-------- .../resources/json/block-core-whitelist.json | 3 +-- .../badegg/resources/json/block-parents.json | 3 --- .../views/blocks/article/css/_base.scss | 1 - .../views/blocks/article/css/_details.scss | 17 ++++++++++++ .../views/blocks/article/css/_embed.scss | 10 +++++++ .../views/blocks/article/css/_quote.scss | 2 +- .../views/blocks/article/css/_verse.scss | 14 ++++++++++ .../resources/views/blocks/article/style.scss | 6 ++--- 17 files changed, 85 insertions(+), 27 deletions(-) create mode 100644 web/app/themes/badegg/resources/css/global/variables/_fonts.scss create mode 100644 web/app/themes/badegg/resources/views/blocks/article/css/_details.scss create mode 100644 web/app/themes/badegg/resources/views/blocks/article/css/_embed.scss create mode 100644 web/app/themes/badegg/resources/views/blocks/article/css/_verse.scss diff --git a/web/app/themes/badegg/app/blocks.php b/web/app/themes/badegg/app/blocks.php index 7f6bb7e1..d31077b8 100644 --- a/web/app/themes/badegg/app/blocks.php +++ b/web/app/themes/badegg/app/blocks.php @@ -31,6 +31,11 @@ add_filter( 'block_categories_all' , __NAMESPACE__ . '\\add_categories' ); add_filter( 'badegg_block_types_allow', __NAMESPACE__ . '\\allowed_list' ); add_action( 'init', __NAMESPACE__ . '\\auto_register' ); +/** + * Core Blocks + */ +add_filter( 'render_block_core/details', __NAMESPACE__ . '\\core_details_modified', 10, 2 ); + function remove_action_block_inline() { @@ -251,3 +256,11 @@ function render_acf($block, $content = '', $is_preview = false, $post_id = 0, $w ', '
', $content); + $content = str_replace('', '
', $content); + + return $content; +} diff --git a/web/app/themes/badegg/resources/css/components/_button.scss b/web/app/themes/badegg/resources/css/components/_button.scss index 95eed34d..2fbfa968 100644 --- a/web/app/themes/badegg/resources/css/components/_button.scss +++ b/web/app/themes/badegg/resources/css/components/_button.scss @@ -1,4 +1,4 @@ -@use "../global/fonts"; +@use "../global/variables/fonts"; @use "../global/variables/colours"; button { diff --git a/web/app/themes/badegg/resources/css/components/_forms.scss b/web/app/themes/badegg/resources/css/components/_forms.scss index 40dbb461..01ccf9fc 100644 --- a/web/app/themes/badegg/resources/css/components/_forms.scss +++ b/web/app/themes/badegg/resources/css/components/_forms.scss @@ -1,4 +1,4 @@ -@use "../global/fonts"; +@use "../global/variables/fonts"; @use "../global/variables/breakpoints"; @use "../global/variables/colours"; diff --git a/web/app/themes/badegg/resources/css/global/_fonts.scss b/web/app/themes/badegg/resources/css/global/_fonts.scss index 91a83770..22750f46 100644 --- a/web/app/themes/badegg/resources/css/global/_fonts.scss +++ b/web/app/themes/badegg/resources/css/global/_fonts.scss @@ -1,6 +1,3 @@ -$font: "Ubuntu", Helvetica, Arial, sans-serif; -$blockquote: serif; - /* * Roots Fonts Setup * https://roots.io/sage/docs/fonts-setup/ diff --git a/web/app/themes/badegg/resources/css/global/_typography.scss b/web/app/themes/badegg/resources/css/global/_typography.scss index 994ab451..d5d59650 100644 --- a/web/app/themes/badegg/resources/css/global/_typography.scss +++ b/web/app/themes/badegg/resources/css/global/_typography.scss @@ -1,4 +1,4 @@ -@use "fonts"; +@use "variables/fonts"; @use "variables/breakpoints"; @use "variables/colours"; @use "variables/spacing"; diff --git a/web/app/themes/badegg/resources/css/global/_variables.scss b/web/app/themes/badegg/resources/css/global/_variables.scss index eed5e1c4..d2eb7382 100644 --- a/web/app/themes/badegg/resources/css/global/_variables.scss +++ b/web/app/themes/badegg/resources/css/global/_variables.scss @@ -1,3 +1,4 @@ +@use "variables/fonts"; @use "variables/colours"; @use "variables/breakpoints"; @use "variables/spacing"; diff --git a/web/app/themes/badegg/resources/css/global/framework/_normalise.scss b/web/app/themes/badegg/resources/css/global/framework/_normalise.scss index 9cdef118..7d146e38 100644 --- a/web/app/themes/badegg/resources/css/global/framework/_normalise.scss +++ b/web/app/themes/badegg/resources/css/global/framework/_normalise.scss @@ -32,6 +32,11 @@ img { transition: all 300ms ease; } +video { + max-width: 100%; + height: auto; +} + img.lazy, .lazy-bg, .lazy-loaded { diff --git a/web/app/themes/badegg/resources/css/global/variables/_fonts.scss b/web/app/themes/badegg/resources/css/global/variables/_fonts.scss new file mode 100644 index 00000000..ce8c145f --- /dev/null +++ b/web/app/themes/badegg/resources/css/global/variables/_fonts.scss @@ -0,0 +1,2 @@ +$font: "Ubuntu", Helvetica, Arial, sans-serif; +$blockquote: serif; diff --git a/web/app/themes/badegg/resources/js/editor.js b/web/app/themes/badegg/resources/js/editor.js index 1d6aa29b..a6ff3532 100644 --- a/web/app/themes/badegg/resources/js/editor.js +++ b/web/app/themes/badegg/resources/js/editor.js @@ -12,16 +12,20 @@ domReady(() => { return settings } - wp.hooks.addFilter( - 'blocks.registerBlockType', - 'badegg/restrict-parent-blocks', - restrictEditorParentBlocks - ); + const coreInnerBlocks = (settings, name) => { + if (['core/media-text', 'core/details', 'core/quote'].includes(name)) { + + settings.allowedBlocks = [ + 'core/paragraph', + 'core/heading', + 'core/list', + ]; + } + + return settings; + } + + wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/restrict-parent-blocks', restrictEditorParentBlocks ); + wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/core-inner-blocks', coreInnerBlocks ); - // find blocks styles - wp.blocks.getBlockTypes().forEach((block) => { - if (_.isArray(block['styles'])) { - console.log('editor.js ' + block.name, _.pluck(block['styles'], 'name')); - } - }); }); diff --git a/web/app/themes/badegg/resources/json/block-core-whitelist.json b/web/app/themes/badegg/resources/json/block-core-whitelist.json index aefa9c41..4f5d0fe9 100644 --- a/web/app/themes/badegg/resources/json/block-core-whitelist.json +++ b/web/app/themes/badegg/resources/json/block-core-whitelist.json @@ -7,17 +7,16 @@ "core/media-text", "core/audio", "core/video", + "core/embed", "core/footnotes", "core/heading", "core/list", - "core/code", "core/details", "core/list-item", "core/missing", "core/paragraph", "core/quote", "core/pullquote", - "core/table", "core/verse" ] diff --git a/web/app/themes/badegg/resources/json/block-parents.json b/web/app/themes/badegg/resources/json/block-parents.json index 94bdf174..ecb5a4cd 100644 --- a/web/app/themes/badegg/resources/json/block-parents.json +++ b/web/app/themes/badegg/resources/json/block-parents.json @@ -1,7 +1,4 @@ [ - "core/media-text", - "core/details", - "core/quote", "acf/badegg-editor", "badegg/article" ] diff --git a/web/app/themes/badegg/resources/views/blocks/article/css/_base.scss b/web/app/themes/badegg/resources/views/blocks/article/css/_base.scss index 17238f56..6f159ab0 100644 --- a/web/app/themes/badegg/resources/views/blocks/article/css/_base.scss +++ b/web/app/themes/badegg/resources/views/blocks/article/css/_base.scss @@ -3,7 +3,6 @@ @use "../../../../css/global/variables/breakpoints"; @use "../../../../css/global/variables/spacing"; @use "../../../../css/global/variables/colours"; -@use "../../../../css/global/fonts"; .wp-block-badegg-article { container-name: BadEggArticle; diff --git a/web/app/themes/badegg/resources/views/blocks/article/css/_details.scss b/web/app/themes/badegg/resources/views/blocks/article/css/_details.scss new file mode 100644 index 00000000..106513d5 --- /dev/null +++ b/web/app/themes/badegg/resources/views/blocks/article/css/_details.scss @@ -0,0 +1,17 @@ +@use "../../../../css/global/variables/colours"; +@use "../../../../css/global/variables/fonts"; + +.wp-block-details { + summary { + font-family: fonts.$font; + font-weight: bold; + } + + @media screen { + .knockout & { + summary { + color: colours.$white; + } + } + } +} diff --git a/web/app/themes/badegg/resources/views/blocks/article/css/_embed.scss b/web/app/themes/badegg/resources/views/blocks/article/css/_embed.scss new file mode 100644 index 00000000..56d7683f --- /dev/null +++ b/web/app/themes/badegg/resources/views/blocks/article/css/_embed.scss @@ -0,0 +1,10 @@ +.wp-block-badegg-article { + .is-type-video { + iframe { + display: block; + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + } + } +} diff --git a/web/app/themes/badegg/resources/views/blocks/article/css/_quote.scss b/web/app/themes/badegg/resources/views/blocks/article/css/_quote.scss index 2ca8595b..e4c3ff3f 100644 --- a/web/app/themes/badegg/resources/views/blocks/article/css/_quote.scss +++ b/web/app/themes/badegg/resources/views/blocks/article/css/_quote.scss @@ -1,7 +1,7 @@ @use "../../../../css/global/variables/breakpoints"; @use "../../../../css/global/variables/spacing"; @use "../../../../css/global/variables/colours"; -@use "../../../../css/global/fonts"; +@use "../../../../css/global/variables/fonts"; .wp-block-badegg-article { .wp-block-pullquote blockquote, diff --git a/web/app/themes/badegg/resources/views/blocks/article/css/_verse.scss b/web/app/themes/badegg/resources/views/blocks/article/css/_verse.scss new file mode 100644 index 00000000..a480e49d --- /dev/null +++ b/web/app/themes/badegg/resources/views/blocks/article/css/_verse.scss @@ -0,0 +1,14 @@ +@use "../../../../css/global/variables/colours"; +@use "../../../../css/global/variables/fonts"; + +.wp-block-verse { + font-family: fonts.$font; + line-height: 2; + word-wrap: normal; + + @media screen { + .knockout & { + color: colours.$white; + } + } +} diff --git a/web/app/themes/badegg/resources/views/blocks/article/style.scss b/web/app/themes/badegg/resources/views/blocks/article/style.scss index dd345128..5462bdfd 100644 --- a/web/app/themes/badegg/resources/views/blocks/article/style.scss +++ b/web/app/themes/badegg/resources/views/blocks/article/style.scss @@ -1,8 +1,8 @@ - - @use 'css/base'; @use 'css/image'; @use 'css/gallery'; @use 'css/media-text'; @use 'css/quote'; - +@use 'css/embed'; +@use 'css/verse'; +@use 'css/details';