diff --git a/app/ACF/Dynamic.php b/app/ACF/Dynamic.php index b022f46..b839ae3 100644 --- a/app/ACF/Dynamic.php +++ b/app/ACF/Dynamic.php @@ -15,6 +15,7 @@ class Dynamic add_filter('acf/load_field/name=fontawesome_regular', [ $this, 'load_fontawesome_regular_icons' ]); add_filter('acf/load_field/name=fontawesome_solid', [ $this, 'load_fontawesome_solid_icons' ]); add_filter('acf/load_field/name=fontawesome_brands', [ $this, 'load_fontawesome_brand_icons' ]); + add_action('acf/input/admin_footer', [$this, 'colour_ui'] ); } public function load_colours( $field ) @@ -98,5 +99,43 @@ class Dynamic return $choices; } + + public function colour_ui() + { ?> + + + + inner_blocks()); + $blacklist = array_diff($blacklist, $Editor->inner_blocks()); return array_values( array_diff( $blocks, $blacklist ) ); } diff --git a/app/setup.php b/app/setup.php index 1067e03..666d77c 100644 --- a/app/setup.php +++ b/app/setup.php @@ -46,6 +46,16 @@ add_filter('admin_head', function () { ])->toHtml(); }); +add_action( 'enqueue_block_editor_assets', function(){ + wp_enqueue_script( + 'restrict-core-blocks', + Vite::asset('resources/js/admin/block-restrictions.js'), + array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-blocks', 'wp-hooks' ), + 'v1.0.0', + true + ); +}); + /** * Use the generated theme.json file. * diff --git a/resources/acf/group_block_content.json b/resources/acf/group_block_editor.json similarity index 96% rename from resources/acf/group_block_content.json rename to resources/acf/group_block_editor.json index 9ee60fc..ebf4b66 100644 --- a/resources/acf/group_block_content.json +++ b/resources/acf/group_block_editor.json @@ -1,6 +1,6 @@ { - "key": "group_block_content", - "title": "Block: Content", + "key": "group_block_editor", + "title": "Block: Editor", "fields": [ { "key": "field_67659ad8dc795", @@ -92,7 +92,7 @@ { "param": "block", "operator": "==", - "value": "acf\/badegg-content" + "value": "acf\/badegg-editor" } ] ], diff --git a/resources/acf/group_clone_background_settings.json b/resources/acf/group_clone_background_settings.json index 7b63f06..db90b08 100644 --- a/resources/acf/group_clone_background_settings.json +++ b/resources/acf/group_clone_background_settings.json @@ -4,7 +4,7 @@ "fields": [ { "key": "field_67325dd23234e", - "label": "Background Colour", + "label": "Colour", "name": "bg_colour", "aria-label": "", "type": "select", @@ -17,17 +17,8 @@ "id": "" }, "choices": { - "primary": "<\/i> Prussian Blue", - "secondary": "<\/i> Sunset Orange", - "tertiary": "<\/i> Gold", - "quaternary": "<\/i> Moody Blue", - "quinary": "<\/i> Frangipani", "0": "<\/i> White", - "black": "<\/i> Black", - "quaternary-white": "<\/i> Moody Blue to White", - "quinary-white": "<\/i> Frangipani to White", - "white-quaternary": "<\/i> White to Moody Blue", - "white-quinary": "<\/i> White to Frangipani" + "black": "<\/i> Black" }, "default_value": 0, "return_format": "value", @@ -42,7 +33,7 @@ }, { "key": "field_67325e213234f", - "label": "Background Tint", + "label": "Tint", "name": "bg_tint", "aria-label": "", "type": "select", @@ -122,5 +113,5 @@ "active": true, "description": "", "show_in_rest": 0, - "modified": 1748194684 + "modified": 1764224358 } diff --git a/resources/acf/group_post_social.json b/resources/acf/group_post_social.json index 70ca9ae..0123aeb 100644 --- a/resources/acf/group_post_social.json +++ b/resources/acf/group_post_social.json @@ -492,7 +492,9 @@ "allow_null": 0, "ui": 1, "ajax": 0, - "placeholder": "" + "placeholder": "", + "create_options": 0, + "save_options": 0 }, { "key": "field_664c65c653f1c", @@ -530,5 +532,5 @@ "active": true, "description": "", "show_in_rest": 0, - "modified": 1734711372 + "modified": 1764224435 } diff --git a/resources/css/editor.scss b/resources/css/editor.scss index e69de29..6b53bf1 100644 --- a/resources/css/editor.scss +++ b/resources/css/editor.scss @@ -0,0 +1,53 @@ +@use "./app"; + +.editor-styles-wrapper { + padding: 1em; + background: transparent; +} + +.editor-visual-editor { + .wp-block { + max-width: none; + } + + .block-list-appender { + width: 350px; + max-width: 90%; + margin: 1em auto; + background: white; + } + + &__post-title-wrapper { + padding: 1rem; + margin: 0 0 3rem !important; + background: white; + box-shadow: 0 0.5rem 1rem rgba(black, 0.15); + } + + .wp-block-post-title { + position: relative; + padding: 0.5rem; + border: 1px solid rgba(black, 0.3); + margin: 0; + + &::before { + content: 'Page Title'; + position: absolute; + top: -0.5rem; + left: 0.5rem; + color: rgba(black, 0.3); + font-size: 0.8rem; + display: block; + padding: 0 0.5rem; + margin: 0; + background: white; + line-height: 1; + font-weight: 400; + } + } + + .wp-block-post-content { + // background: white; + // box-shadow: 0 0.5rem 1rem rgba(black, 0.15); + } +} diff --git a/resources/css/global/_typography.scss b/resources/css/global/_typography.scss index 8cf8f4b..b11d5fa 100644 --- a/resources/css/global/_typography.scss +++ b/resources/css/global/_typography.scss @@ -63,7 +63,7 @@ p, li, td, label { - color: colours.$grey; + color: colours.$grey-dark; font-family: fonts.$font; font-weight: 400; line-height: 1.5em; diff --git a/resources/js/app.js b/resources/js/app.js index 81e8858..1849ac5 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -3,16 +3,10 @@ import.meta.glob([ '../fonts/**', ]); -import domReady from '@wordpress/dom-ready'; import blocks from './blocks.js'; import Header from './sections/header.js'; import LazyLoad from './lib/Lazy.js'; -/** - * Application entrypoint - */ -domReady(async () => { - LazyLoad(); - blocks(); - Header(); -}); +LazyLoad(); +blocks(); +Header(); diff --git a/resources/js/blocks.js b/resources/js/blocks.js index 96e9858..2c26d7b 100644 --- a/resources/js/blocks.js +++ b/resources/js/blocks.js @@ -1,6 +1,6 @@ -import BadExample from "./blocks/BadExample"; +// import BadExample from "./blocks/BadExample"; export default function() { - BadExample(); + // BadExample(); } diff --git a/resources/js/blocks/BadExample.js b/resources/js/blocks/BadExample.js deleted file mode 100644 index f0c2bde..0000000 --- a/resources/js/blocks/BadExample.js +++ /dev/null @@ -1,4 +0,0 @@ -export default function BadExample() -{ - -} diff --git a/resources/js/editor.js b/resources/js/editor.js index f31215c..d94e11c 100644 --- a/resources/js/editor.js +++ b/resources/js/editor.js @@ -1,5 +1,52 @@ import domReady from '@wordpress/dom-ready'; domReady(() => { - // + + const restrictEditorParentBlocks = (settings, name) => { + const TEXT_EDITOR_BLOCKS = [ + // Design + 'core/separator', + 'core/spacer', + + // Media + 'core/cover', + 'core/file', + 'core/gallery', + 'core/image', + 'core/media-text', + 'core/audio', + 'core/video', + + // Text + 'core/footnotes', + 'core/heading', + 'core/list', + 'core/code', + 'core/details', + 'core/freeform', + 'core/list-item', + 'core/missing', + 'core/paragraph', + 'core/preformatted', + 'core/pullquote', + 'core/quote', + 'core/table', + 'core/verse', + ]; + + if (TEXT_EDITOR_BLOCKS.includes(name)) { + settings.parent = ['acf/badegg-editor'] + } + + // console.log(settings, name) + + return settings + } + + wp.hooks.addFilter( + 'blocks.registerBlockType', + 'your-project-name/restrict-parent-blocks', + restrictEditorParentBlocks + ); + }); diff --git a/resources/js/lib/isInsideBlock.js b/resources/js/lib/isInsideBlock.js new file mode 100644 index 0000000..25118e1 --- /dev/null +++ b/resources/js/lib/isInsideBlock.js @@ -0,0 +1,12 @@ +export default function isInsideMyACFBlock(blockName) +{ + const editor = wp.data.select('core/block-editor'); + const selectedId = editor.getSelectedBlockClientId(); + + if (!selectedId) return false; + + const parents = editor.getBlockParents(selectedId); + const parentNames = parents.map(id => editor.getBlockName(id)); + + return parentNames.includes(blockName); +} diff --git a/resources/views/blocks/Content/Content.blade.php b/resources/views/blocks/Editor/Editor.blade.php similarity index 72% rename from resources/views/blocks/Content/Content.blade.php rename to resources/views/blocks/Editor/Editor.blade.php index 39d59d8..300da65 100644 --- a/resources/views/blocks/Content/Content.blade.php +++ b/resources/views/blocks/Editor/Editor.blade.php @@ -11,7 +11,10 @@
- +
diff --git a/resources/views/blocks/Content/Content.jpg b/resources/views/blocks/Editor/Editor.jpg similarity index 100% rename from resources/views/blocks/Content/Content.jpg rename to resources/views/blocks/Editor/Editor.jpg diff --git a/resources/views/blocks/Content/Content.php b/resources/views/blocks/Editor/Editor.php similarity index 72% rename from resources/views/blocks/Content/Content.php rename to resources/views/blocks/Editor/Editor.php index 07dd563..5ea0d35 100644 --- a/resources/views/blocks/Content/Content.php +++ b/resources/views/blocks/Editor/Editor.php @@ -1,10 +1,10 @@ 'badegg/content', - 'title' => __('Content'), - 'description' => __('Wordpress blocks inside a wrapper'), + 'name' => 'badegg-editor', + 'title' => __('Text Editor'), + 'description' => __('Long form text content with support for things like headings, lists, and images.'), 'render_callback' => [ $this, 'render'], 'category' => 'badegg', - 'icon' => 'columns', + 'icon' => 'media-document', 'supports' => [ 'align' => false, 'jsx' => true, @@ -67,6 +67,7 @@ class Content $data = array_merge($data, $block); $data['section_classes'] = $CssClasses->section($data); $data['allowed_blocks'] = $this->inner_blocks(); + $data['template'] = $this->default_template(); $data['block'] = $block; echo \Roots\view("blocks.$name.$name", [ @@ -75,6 +76,31 @@ class Content ])->render(); } + public function default_template() + { + return [ + [ + 'core/heading', + [ + 'level' => 1, + 'placeholder' => 'Heading', + ], + ], + [ + 'core/paragraph', + [ + 'placeholder' => 'You can type your own text, change the heading level, or delete it altogether. You can also type over this text.', + ], + ], + [ + 'core/paragraph', + [ + 'placeholder' => 'To adjust block settings, click the Text Editor icon floating above this block to display them in the sidebar.', + ], + ], + ]; + } + public function inner_blocks() { return [ diff --git a/resources/views/blocks/Content/Content.scss b/resources/views/blocks/Editor/Editor.scss similarity index 100% rename from resources/views/blocks/Content/Content.scss rename to resources/views/blocks/Editor/Editor.scss