Simple CSS for pages

Hello. Can you send us a URL where that happens?

Hello.

I don’t see any CSS in the Simple CSS text area for that page you sent.

Is it happening for this particular page only? I have noticed that this page is actually not being saved when you press the Save button. I get a Updating failed. The response is not a valid JSON response. notice. In that case, the custom CSS cannot be saved either.

Have you tried other pages?

Ok, I have tried another page and the custom CSS seems to be working. For the particular page that you sent us, there seems to be an issue with the shortcode at the bottom of the page. It seems that when the shortcode is present on the page, the page isn’t properly saved. If you remove the shortcode, you will see that the custom CSS will save with the page.

Where is this shortcode constructed?

Here are some likely issues with the current code.

1. Output Buffer Problem
The shortcode has a stray <br> tag being output directly with ?> <br><?php before the buffered content. This is being echoed immediately rather than being captured in the $out variable, which could corrupt the JSON response during save operations.

2. Special Characters in Output
The esc_html() function is good, but if the term names or post titles contain certain characters, they might still cause JSON encoding issues when WordPress tries to process the REST API response.

3. WP_Query Not Being Cleaned Up Properly
While wp_reset_postdata() is present, during the save operation, the query might be interfering with WordPress’s internal processes.

Here’s a corrected version of the shortcode:

add_shortcode( 'ausschuesse', function () {
    $taxonomy = 'ausschuss';
    $post_type = 'mitglieder';
    
    $out = '<br>'; // Capture the line break in the output variable
    
    $terms = get_terms([
        'taxonomy'   => $taxonomy,
        'hide_empty' => false,
    ]);
    
    if (!empty($terms) && !is_wp_error($terms)) {
        foreach ($terms as $term) {
            $out .= '<h3>' . esc_html($term->name) . '</h3>';
            
            $query = new WP_Query([
                'post_type'      => $post_type,
                'posts_per_page' => -1,
                'tax_query'      => [
                    [
                        'taxonomy' => $taxonomy,
                        'field'    => 'term_id',
                        'terms'    => $term->term_id,
                    ]
                ]
            ]);
            
            if ($query->have_posts()) {
                $out .= '<ul>';
                while ($query->have_posts()) {
                    $query->the_post();
                    $out .= '<li><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></li>';
                }
                $out .= '</ul>';
            } else {
                $out .= '<p>Kein Mitglied.</p>';
            }
            
            wp_reset_postdata();
        }
    }
    
    return $out;
});

Key Changes

1. Removed the stray <br> output – Now it’s captured in the $out variable instead of being echoed directly.

2. Added esc_url() around get_permalink() – Better escaping for URLs

3. Added esc_html() around get_the_title() – Ensures title is properly escaped

When you save a page in the block editor, WordPress makes a REST API call to save the content. If anything outputs directly to the buffer (like that <br> tag between ?> and <?php), it can corrupt the JSON response, causing the “not a valid JSON response” error.
The issue is specifically triggered when custom CSS is being saved because that involves additional REST API interactions, making it more sensitive to any output buffer contamination.

Please, backup up your current code and try using the one I provided instead. Then, try inserting some custom CSS on the page you have provided and save the page. Your custom CSS will probably save fine and you will see any changes in the front end.

No problem at all!