Enclosing Shortcode Within Another Enclosing Shortcode Breaks Output Functionality

Question

I've seen several questions on this topic, however none of them seem to actually answer the question.

I'm currently registering my shortcodes on after_setup_theme.

function mbe_register_shortcodes() {

    require_once( PATH . '/inc/shortcodes.php' );

    add_shortcode( 'font', 'mbe_shortcode_font' );

}

add_action( 'after_setup_theme', 'mbe_register_shortcodes' );

Contents of Shortcodes.php:

/**
 * @param array       $attributes
 * @param String|null $content
 *
 * @return string
 */
function mbe_shortcode_font( $attributes = array(), String $content = null ) {

    $default_attributes = array(
        'color'  => false,
        'weight' => 'normal',
        'align'  => 'left'
    );

    $attributes = shortcode_atts( $default_attributes, $attributes );

    if ( $attributes['color'] !== false ) {
        $attributes['color'] = 'color';
    }

    $html = '' . PHP_EOL;

    $html .= '<span class="' . esc_attr( $attributes['color'] . ' font-' . $attributes['weight'] . ' text-' . $attributes['align'] ) . '">' . $content . '</span>' . PHP_EOL;

    return $html;

}

Sample Text:

[font align="center" weight="extra-bold"]YOUR LOCAL [font color="true"]FULL SERVICE[/font] REAL ESTATE OFFICE[/font]
[font align="center" weight="semi-bold-italic"]Our Realtors Know Real Estate![/font]

With the default code specified above, the output is like:

<span class=" font-extra-bold text-center">YOUR LOCAL [font color="true"]FULL SERVICE</span> REAL ESTATE OFFICE[/font]
<span class=" font-semi-bold-italic text-center">Our Realtors Know Real Estate!</span>

My desired output is like:

<span class=" font-extra-bold text-center">YOUR LOCAL <span class="color">FULL SERVICE</span> REAL ESTATE OFFICE</span>
<span class=" font-semi-bold-italic text-center">Our Realtors Know Real Estate!</span>

#1 I've tried...

$html .= '<span class="' . esc_attr( $attributes['color'] . ' font-' . $attributes['weight'] . ' text-' . $attributes['align'] ) . '">' . $content. '</span>' . PHP_EOL;

return do_shortcode( $html );

#1 and outputs...

<span class=" font-extra-bold text-center">YOUR LOCAL 
<span class="color font-normal text-left"></span>
FULL SERVICE</span>
 REAL ESTATE OFFICE[/font]

<span class=" font-semi-bold-italic text-center">Our Realtors Know Real Estate!</span>

#2 And this...

$html .= '<span class="' . esc_attr( $attributes['color'] . ' font-' . $attributes['weight'] . ' text-' . $attributes['align'] ) . '">' . do_shortcode( $content ) . '</span>' . PHP_EOL;

return $html;

#2 and outputs...

<span class=" font-extra-bold text-center">YOUR LOCAL 
<span class="color font-normal text-left"></span>
FULL SERVICE</span>
 REAL ESTATE OFFICE[/font]

<span class=" font-semi-bold-italic text-center">Our Realtors Know Real Estate!</span>

#3 And this...

$html .= '<span class="' . esc_attr( $attributes['color'] . ' font-' . $attributes['weight'] . ' text-' . $attributes['align'] ) . '">' . do_shortcode( $content ). '</span>' . PHP_EOL;

return do_shortcode( $html );

#3 and outputs ...

<span class=" font-extra-bold text-center">YOUR LOCAL 
<span class="color font-normal text-left"></span>
FULL SERVICE</span>
 REAL ESTATE OFFICE[/font]

<span class=" font-semi-bold-italic text-center">Our Realtors Know Real Estate!</span>

Answer 1

TLDR; Nested shortcodes cannot have the same name. You must have unique names for shortcodes within shortcodes.

I've found the answer thanks to @patnz in response to: shortcode inside another shortcode.

If you look at the WordPress Codex :: Shortcode API :: Nested Shortcodes you will find the answer with an illustrative example.

So in my situation, as a quick fix, I've just added another shortcode.

function mbe_register_shortcodes() {

    require_once( PATH . '/inc/shortcodes.php' );

    add_shortcode( 'font', 'mbe_shortcode_font' );
    add_shortcode( 'font_color', 'mbe_shortcode_font_color' ); // Added

}

add_action( 'after_setup_theme', 'mbe_register_shortcodes' );

Contents of shortcodes.php:

function shortcode_font( $attributes = array(), String $content = null ) {

    $default_attributes = array(
        'weight' => 'normal',
        'align'  => 'left'
    );

    $attributes = shortcode_atts( $default_attributes, $attributes );

    $html = '<span class="font-' . esc_attr( $attributes['weight'] ) . ' text-' . esc_attr( $attributes['align'] ) . '">' . $content . '</span>';

    return do_shortcode( $html );

}

function shortcode_font_color( $attributes = array(), String $content = null ) {

    $html = '<span class="color">' . $content . '</span>';

    return do_shortcode( $html );

}