Untranslated strings in patterns; question regarding footer offset patterns

[luminuu]

There are several untranslated strings in the patterns which I discovered while looking through the files of the theme. For the majority of this strings adding a translation isn't a big deal.

However there is one string, that might be a bit tricky to translate and keep the styling in place. In the footer-offset-* patterns, there's this big Let's Work Together. The words are put separately in span elements, with the first one having a bunch of additional CSS. It would be wrong to translate the words individually without the spans, because in different languages the grammar can be in a different order. Let's take German for example:

• Translated word by word: "Lass arbeiten zusammen"
• Translated meaningfully, informal version: "Lass uns zusammen arbeiten"
• Translated meaningfully, formal version: "Lassen Sie uns zusammen arbeiten"

As you can see, not only the word order changes from the original English string, but in German there need more words to be added to make it grammatically correct. So it's not possible to translate each word individually, instead the entire string with the span tags and additional CSS must be included to ensure correct translation. And then this leads to the fact that a translator is now in charge of the design decision which words to highlight with the first span. The final question is: shall this string remain untranslated to ensure it follows the design, or is the entire string added to the translation to ensure it can be translated correctly?

Here's an overview of the untranslated strings per pattern file:

footer-call-to-action-dark.php

extendable/patterns/footer-call-to-action-dark.php

Line 14 in 8a71561

<h2 class="has-text-align-center has-x-large-font-size" id="let-s-work-together">Let's Work Together</h2>

extendable/patterns/footer-call-to-action-dark.php

Line 19 in 8a71561

<div class="wp-block-button"><a class="wp-block-button__link">Contact Us</a></div>

extendable/patterns/footer-call-to-action-dark.php

Line 29 in 8a71561

<p class="has-text-align-right has-secondary-color has-text-color has-link-color" style="font-size:0.95rem">Proudly powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>

footer-call-to-action.php

extendable/patterns/footer-call-to-action.php

Line 24 in 8a71561

<p>Providing reliable business since forever.</p>

extendable/patterns/footer-call-to-action.php

Line 32 in 8a71561

<p class="has-text-align-left" style="font-size:0.95rem">Proudly powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>

extendable/patterns/footer-call-to-action.php

Line 39 in 8a71561

<h4 class="has-small-font-size" id="about">About</h4>

extendable/patterns/footer-call-to-action.php

Line 47 in 8a71561

<h4 class="has-small-font-size" id="company-1">Products</h4>

footer-default.php

extendable/patterns/footer-default.php

Line 21 in 8a71561

<p class="has-small-font-size">© <?php echo gmdate( 'Y' ); ?> Your Company LLC</p>

footer-logo-desc-two-nav.php

extendable/patterns/footer-logo-desc-two-nav.php

Line 14 in 8a71561

<h2 class="has-text-align-center has-x-large-font-size" id="let-s-work-together">Let's Work Together</h2>

extendable/patterns/footer-logo-desc-two-nav.php

Line 19 in 8a71561

<div class="wp-block-button"><a class="wp-block-button__link">Contact Us</a></div>

extendable/patterns/footer-logo-desc-two-nav.php

Line 29 in 8a71561

<p class="has-text-align-right" style="font-size:0.95rem">Proudly powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>

footer-logo-nav.php

extendable/patterns/footer-logo-nav.php

Line 3 in 8a71561

* Title: Footer, Logo and Navigation TEST

I guess the TEST can be removed here, it currently shows up in the translation strings.

extendable/patterns/footer-logo-nav.php

Line 17 in 8a71561

<p class="has-text-align-right has-small-font-size">Proudly powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>

footer-offset-heading-buttons-dark.php

extendable/patterns/footer-offset-heading-buttons-dark.php

Line 15 in 8a71561

<h2 class="has-text-align-left is-offset-copy has-xx-large-font-size" id="let-s-work-together" style="line-height:1.1"><span style="color: revert; font-family: var(--wp--preset--font-family--source-serif-4); font-size: clamp(3.5rem, 8vw, 8rem); display: inline !important;">Let's</span><span>Work</span><span>Together</span></h2>

extendable/patterns/footer-offset-heading-buttons-dark.php

Line 22 in 8a71561

<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Learn More</a></div>

extendable/patterns/footer-offset-heading-buttons-dark.php

Line 26 in 8a71561

<div class="wp-block-button"><a class="wp-block-button__link">Contact Us</a></div>

extendable/patterns/footer-offset-heading-buttons-dark.php

Line 41 in 8a71561

<p class="has-text-align-right has-secondary-color has-text-color has-link-color" style="font-size:0.95rem">Proudly powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>

footer-offset-heading-buttons-primary.php

extendable/patterns/footer-offset-heading-buttons-primary.php

Line 15 in 8a71561

<h2 class="has-text-align-left is-offset-copy has-xx-large-font-size" id="let-s-work-together" style="line-height:1.1"><span style="color: revert; font-family: var(--wp--preset--font-family--source-serif-4); font-size: clamp(3.5rem, 8vw, 8rem); display: inline !important;">Let's</span><span>Work</span><span>Together</span></h2>

extendable/patterns/footer-offset-heading-buttons-primary.php

Line 22 in 8a71561

<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-primary-color has-text-color">Learn More</a></div>

extendable/patterns/footer-offset-heading-buttons-primary.php

Line 26 in 8a71561

<div class="wp-block-button"><a class="wp-block-button__link">Contact Us</a></div>

extendable/patterns/footer-offset-heading-buttons-primary.php

Line 41 in 8a71561

<p class="has-text-align-right has-secondary-color has-text-color has-link-color" style="font-size:0.95rem">Proudly powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>

footer-offset-heading-buttons.php

extendable/patterns/footer-offset-heading-buttons.php

Line 15 in 8a71561

<h2 class="has-text-align-left is-offset-copy has-xx-large-font-size" id="let-s-work-together" style="line-height:1.1"><span style="color: revert; font-family: var(--wp--preset--font-family--source-serif-4); font-size: clamp(3.5rem, 8vw, 8rem); display: inline !important;">Let's</span><span>Work</span><span>Together</span></h2>

extendable/patterns/footer-offset-heading-buttons.php

Line 22 in 8a71561

<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Learn More</a></div>

extendable/patterns/footer-offset-heading-buttons.php

Line 26 in 8a71561

<div class="wp-block-button"><a class="wp-block-button__link has-primary-color has-background-background-color has-text-color has-background">Contact Us</a></div>

extendable/patterns/footer-offset-heading-buttons.php

Line 41 in 8a71561

<p class="has-text-align-right has-background-color has-text-color has-link-color" style="font-size:0.95rem">Proudly powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>

header-title-nav-button.php

extendable/patterns/header-title-nav-button.php

Line 19 in 8a71561

<div class="wp-block-button"><a class="wp-block-button__link">Get Started</a></div>

[clubkert]

Hmm... thanks @luminuu. Good catch.

The final question is: shall this string remain untranslated to ensure it follows the design, or is the entire string added to the translation to ensure it can be translated correctly?

I think this is my overall question. Maybe it is fine for this string to be untranslated. That ensures the pattern structure remains intact (both the styling and the space that the text takes up).

[KevinBatdorf]

One option is using wp_sprintf with _x you can format it with the <span> tags in a responsible way. The translator would have to decide where to place the tags but the inline styling would be abstracted.

wp_sprintf(
  _x(
    '<span %1$s>Let's</span><span>Work</span><span>Together</span>',
    'Translators, chose meaningful places to break the sentence apart, but keep the inline styles in the first span',
    'extendable'
  ),
  'style="color: revert; font-family: var(--wp--preset--font-family--source-serif-4); font-size: clamp(3.5rem, 8vw, 8rem); display: inline !important;"'
);