Other CSS Framework #1

suabahasa · 2024-03-14T05:48:35Z

suabahasa
Mar 14, 2024
Maintainer

Yabe Movebender is built for the Yabe Siul plugin.
However, if you want to use it with other CSS frameworks, Yabe Movebender has filter hooks for registering your custom Autocomplete items.

We have attached a snippet code below that you can save using the snippet plugin or on the theme's function.php file.

<?php

/**
 * Movebender - Other CSS Framework
 *
 * Included CSS Framework:
 * - Core Framework
 * - Automatic CSS
 * - Bootstrap 5
 */

// Core Framework. Uncomment the line below to enable the feature.
// add_action('a!yabe/movebender/module/plainclasses:register_autocomplete', static fn () => mvb_register_core_framework(), 1_000_000);

// Automatic CSS. Uncomment the line below to enable the feature.
// add_action('a!yabe/movebender/module/plainclasses:register_autocomplete', static fn () => mvb_register_automatic_css(), 1_000_000);

// Bootstrap 5. Uncomment the line below to enable the feature.
// add_action('a!yabe/movebender/module/plainclasses:register_autocomplete', static fn () => mvb_register_bootstrap_5(), 1_000_000);

// Core Framework
function mvb_register_core_framework()
{
    if (!class_exists(\CoreFramework\Helper::class)) {
        return;
    }

    $classes = json_encode((new \CoreFramework\Helper())->getClassNames(['group_by_category' => false]));

    echo <<<HTML

        <script>
            document.addEventListener('DOMContentLoaded', async function () {
                while (!document.querySelector('#app #iframe')?.contentDocument.querySelector('#breakdance_canvas')) {
                    await new Promise(resolve => setTimeout(resolve, 100));
                }

                wp.hooks.addFilter('movebender-autocomplete-items', 'movebender', function (items) {
                    return [...items, ...Object.values({$classes}).map((value) => ({ value: value }))];
                });
            });
        </script>
    HTML;
}

// Automatic CSS
function mvb_register_automatic_css()
{
    if (!class_exists(\Automatic_CSS\Model\Config\Classes::class)) {
        return;
    }

    $classes = json_encode((new \Automatic_CSS\Model\Config\Classes())->load());

    echo <<<HTML
        <script>
            document.addEventListener('DOMContentLoaded', async function () {
                while (!document.querySelector('#app #iframe')?.contentDocument.querySelector('#breakdance_canvas')) {
                    await new Promise(resolve => setTimeout(resolve, 100));
                }

                wp.hooks.addFilter('movebender-autocomplete-items', 'movebender', function (items) {
                    return [...items, ...Object.values({$classes}).map((value) => ({ value: value }))];
                });
            });
        </script>
    HTML;
}

// Bootstrap 5
function mvb_register_bootstrap_5()
{
    echo <<<HTML
        <script type="module">
            import * as CSSwhat from 'https://esm.sh/css-what';

            document.addEventListener('DOMContentLoaded', async function () {
                (async () => {
                    let response = await fetch('https://esm.sh/bootstrap/dist/css/bootstrap.min.css');
                    let data = await response.text();
                    let cssFile = document.createElement('style');
                    cssFile.innerHTML = data;

                    while (!document.querySelector('#app #iframe')?.contentDocument.querySelector('#breakdance_canvas')) {
                        await new Promise(resolve => setTimeout(resolve, 100));
                    }

                    document.querySelector('#app #iframe').contentDocument.head.appendChild(cssFile);

                    let classes = [];

                    for (let rule of cssFile.sheet.rules) {
                        if (rule.selectorText == undefined) {
                            continue;
                        }

                        let parsed = CSSwhat.parse(rule.selectorText);

                        for (let r of parsed) {
                            for (let s of r) {
                                if (s.type == 'attribute' && s.name == 'class') {
                                    classes.push(s.value);
                                }
                            }
                        }
                    };

                    wp.hooks.addFilter('movebender-autocomplete-items', 'movebender', function (items) {
                        return [...items, ...[...new Set(classes)].map((value) => ({ value: value }))];
                    });
                })();

            });
        </script>
    HTML;
}

rossdav70 · 2024-03-16T15:00:29Z

rossdav70
Mar 16, 2024

This snippet generates syntax errors when uncommenting any one of the frameworks.

unextected T_STRING expecting T_PAAMAYIM_NEKUDOAYIM

5 replies

suabahasa Mar 16, 2024
Maintainer Author

Could you share the details of your setup?

rossdav70 Mar 16, 2024

Test environment. Clean install. OLS Server, PHP 8.1. Breakdance, ACSS and your plugin installed plus Advanced Scripts for running snippets. Just wanted to test it really. Perhaps I've misunderstood what it is.

suabahasa Mar 16, 2024
Maintainer Author

Could you give it a try with https://wordpress.org/plugins/code-snippets/ instead?
I have tested it with this plugin.
I hope we can narrow down the root issue.

rossdav70 Mar 16, 2024

Yes, it works with Code Snippets. How odd!

When I assign a class using the new field at the top, If i then go to the advanced classes section I see a warning message - "pad--xxl is assigned to this element but is no longer present on the site. Remove it by clicking here or editing the class list. "

Is this expected behaviour?

suabahasa Mar 16, 2024
Maintainer Author

It is expected behavior.

The assigned classes are not registered on the Breakdance's selector system, so the warning is shown.
It will be only available locally to the element.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Other CSS Framework #1

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Other CSS Framework #1

suabahasa Mar 14, 2024 Maintainer

Replies: 1 comment · 5 replies

rossdav70 Mar 16, 2024

suabahasa Mar 16, 2024 Maintainer Author

rossdav70 Mar 16, 2024

suabahasa Mar 16, 2024 Maintainer Author

rossdav70 Mar 16, 2024

suabahasa Mar 16, 2024 Maintainer Author

suabahasa
Mar 14, 2024
Maintainer

Replies: 1 comment 5 replies

rossdav70
Mar 16, 2024

suabahasa Mar 16, 2024
Maintainer Author

suabahasa Mar 16, 2024
Maintainer Author

suabahasa Mar 16, 2024
Maintainer Author