Options to remove some unnecessary query block wrappers

Feature Requests
21

Hi @LauGau,

I’m not sure, but I think there was a feature request somewhere that would hide selected default blocks.

I couldn’t find it though.

Cheers

22

In the meantime, the free Members plugin has a Block Permissions add-on that does this.

2 Likes
23

I hope this issue will be resolved soon. Remove the unnecessary div in the query block. Louis.

1 Like
24

Me too, would be very nice to have the option to achieve this inside the cwicly editor – many accessibility benefits :slight_smile:

In the meantime, I’ll be removing the wrappers with javascript:

function removeQueryItemWrappers() {
    let queryItemWrappers = document.querySelectorAll(".sitemap-content .cc-query-item");
    Array.from(queryItemWrappers).forEach(wrapper => wrapper.outerHTML = wrapper.innerHTML);
  }

I know that using JS is not a particularly elegant solution, but it’s good enough for my use case.

25

Yes! I hope Cwicly removes the unnecessary wrappers from the query block and other block (I couldn’t recall the other one) to make things easier when we style it.

I hope Louis will make it soon.

26

Hello @jornes,

Yes this is necessary!

Once we’ve reworked the Design Library and whole admin side of things (Themer, Role Editor, Settings), the Query builder will be making its way to the Div block in a first instance and further ones after that.

Hopefully this isn’t too far away, and should coincide with Cwicly being available on the WordPress repository.

6 Likes
28

@StrangeTech @Louis

Simple Server Side fix for the community

This will remove the empty wrappers and cc-query-item wrappers from repeaters and queries.

<?php

class CwiclyBlockUnwrapper {
    /**
     * @var string[] List of Cwicly block names to process
     */
    private $targetBlocks = ['cwicly/repeater', 'cwicly/query'];

    /**
     * @var DOMDocument The DOM representation of the block content
     */
    private $dom;

    /**
     * @var DOMXPath The XPath object for querying the DOM
     */
    private $xpath;

    /**
     * Main method to process the block content
     *
     * @param string $block_content The original block content
     * @param array $block The block information
     * @return string The processed block content
     */
    public function processBlock($block_content, $block) {
        if (in_array($block['blockName'], $this->targetBlocks)) {
            $this->initializeDom($block_content);
            $this->removeWrappers();
            return $this->getModifiedContent();
        }
        return $block_content;
    }

    /**
     * Initialize the DOM with the block content
     *
     * @param string $content The HTML content to process
     */
    private function initializeDom($content) {
        $this->dom = new DOMDocument();
        @$this->dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
        $this->xpath = new DOMXPath($this->dom);
    }

    /**
     * Remove wrapper divs
     */
    private function removeWrappers() {
        // Find all divs without class or id that have children
        $emptyDivs = $this->xpath->query("//div[not(@class) and not(@id) and *]");
        $this->unwrapElements($emptyDivs);

        // Find all divs with class="query-item"
        $queryItems = $this->xpath->query("//div[@class='cc-query-item']");
        $this->unwrapElements($queryItems);
    }

    /**
     * Unwrap elements, replacing them with their children
     *
     * @param DOMNodeList $elements The elements to unwrap
     */
    private function unwrapElements($elements) {
        foreach ($elements as $element) {
            $fragment = $this->dom->createDocumentFragment();
            while ($element->firstChild) {
                $fragment->appendChild($element->firstChild);
            }
            $element->parentNode->replaceChild($fragment, $element);
        }
    }

    /**
     * Get the modified HTML content
     *
     * @return string The processed HTML content
     */
    private function getModifiedContent() {
        return $this->dom->saveHTML();
    }
}

// Initialize the CwiclyBlockUnwrapper
$unwrapper = new CwiclyBlockUnwrapper();

// Add the filter
add_filter('render_block', function($block_content, $block) use ($unwrapper) {
    return $unwrapper->processBlock($block_content, $block);
}, 10, 2);
5 Likes