Editable Elements and internationalization/localization

[CedricLor]

I want my index.liquid page to be internationalized/localized. So let's create a new wagon site.

 wagon init test_site -t bootstrap

All the shizzle gets generated.

First step
app/pages/liquid.index looks like that:

---
title: Home page
published: true
handle: home

---
{% extends 'layouts/simple' %}

{% block content/main %}

<div class="row">
  <div class="col-lg-4">
    {% editable_text first_column %}
      <h2>Heading #1</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    {% endeditable_text %}
  </div>
  <div class="col-lg-4">
    {% editable_text second_column %}
      <h2>Heading #2</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    {% endeditable_text %}
 </div>
  <div class="col-lg-4">
    {% editable_text third_column %}
      <h2>Heading #3</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
    {% endeditable_text %}
  </div>
</div>

{% endblock %}

I run it with a

 bundle exec wagon serve

Everything is fine.

I push it to the Engine with a

  bundle exec wagon push production -d

Everything works properly in the Engine.

Second step

To localize, I need to create an index.fr.liquid (as well as the underlying simple.fr.liquid and default.fr.liquid) and set the relevant locales in my config/site.yml file. My index.fr.liquid looks like that:

---
title: Page d’accueil
published: true
handle: home
editable_elements:
    'content/main/first_column': "Mon texte en français de la première colonne"
    'content/main/second_column': "Mon texte en français de la seconde colonne"
    'content/main/third_column': "Mon texte en français de la troisième colonne"

---

In Wagon, everything works fine (http://localhost:3000 renders the English version and http://localhost:3000/fr renders the French version).

In the Engine, I need to push to a new site in order to override the locales (this is fine).
In the site preview, I can only see my English page, whatever the locale in the URL.
In the back office, same problem.

Third step

So I refactor my index.liquid file to include the editable_elements in the header and make it match with index.fr.liquid and add drops in the body making references to the keys in the editable_elements section.

---
title: Home page
published: true
handle: home
editable_elements:
    'content/main/first_column': "My English first column"
    'content/main/second_column': "My English second column"
    'content/main/third_column': "My English third column"

---
{% extends 'layouts/simple' %}

{% block content/main %}

    {% editable_text first_column %}
    {% endeditable_text %}
    {% editable_text second_column %}
    {% endeditable_text %}
    {% editable_text third_column %}
    {% endeditable_text %}

<div class="row">
  <div class="col-lg-4">
    {{ first_column }}
  </div>

  <div class="col-lg-4">
    {{ second_column }}
  </div>

  <div class="col-lg-4">
    {{ third_column }}
  </div>
</div>

{% endblock %}

Here, in Wagon, everything is broken. Nothing appears in my columns.
In Engine, in the preview, same thing.
In the back-office however, in the textareas (where I can modify the editable elements), I can see the relevant texts that have been inserted in the header of the liquid files.

Fourth step

So I modify again my index.liquid file to insert in the drops a full path reference to the editable_elements.

---
title: Home page
published: true
handle: home
editable_elements:
    'content/main/first_column': "My English first column"
    'content/main/second_column': "My English second column"
    'content/main/third_column': "My English third column"

---
{% extends 'layouts/simple' %}

{% block content/main %}

    {% editable_text first_column %}
    {% endeditable_text %}
    {% editable_text second_column %}
    {% endeditable_text %}
    {% editable_text third_column %}
    {% endeditable_text %}

<div class="row">
  <div class="col-lg-4">
    {{ page.editable_elements.content.main.first_colum }}
  </div>

  <div class="col-lg-4">
    {{ page.editable_elements.content.main.second_column }}
  </div>

  <div class="col-lg-4">
    {{ page.editable_elements.content.main.third_column }}
  </div>
</div>

{% endblock %}

Here, in Wagon, it works fine (everything is displayed properly).
In the Engine, in the preview, it works fine. In the back-office, the textareas are populated correctly.
However, the live editing is broken.

Am I missing something?

[CedricLor]

Additional test using the new slug option. My index.liquid file looks like that:

---

title: Home page
published: true
handle: home
editable_elements:
    'content/main/first_column': "My English first column"
    'content/main/second_column': "My English second column"
    'content/main/third_column': "My English third column"
---
{% extends 'layouts/simple' %}

{% block content/main %}
    {% editable_text "First column", slug: "first_column" %}
    {% endeditable_text %}
    {% editable_text "Second column", slug: "second_column" %}
    {% endeditable_text %}
    {% editable_text "Third column", slug: "third_column" %}
    {% endeditable_text %}

<div class="row">
  <div class="col-lg-4">
    {{ first_column }}
  </div>

  <div class="col-lg-4">
    {{ page.editable_elements.content.main.second_column }}
  </div>

  <div class="col-lg-4">
    {{ page.editable_elements.content.main.third_column }}
  </div>
</div>

{% endblock %}

Using the short syntax in the drop for the first_column, nothing appears anywhere (Wagon, Engine preview, Engine textarea of the backoffice) for the first column.

Using the long path syntax in the drops for the second_column and third_column, everything appears correctly everywhere (Wagon, Egine preview, Engine textarea of the back-office).

However the live editing is still broken.

If I enter changes in the textarea for the first column and click the save button, such changes are saved into the database, but still do not appear (whether on the preview or the textarea).

 #<Locomotive::EditableText _id: 5666a7053a7dbc4843000097, created_at: 2015-12-08 09:46:45 UTC, updated_at: 2015-12-08 09:59:39 UTC, slug: "first_column", block: "content/main", content: {"en"=>"\n    ", "fr"=>"<p>Re texte pour la première colonne</p>"}, hint: nil, priority: 0, fixed: false, disabled: {"en"=>false, "fr"=>false}, from_parent: false, locales: ["fr"], _type: "Locomotive::EditableText", default_content: {"en"=>true, "fr"=>false}, format: "html", rows: 10, line_break: true, inline_editing: true, type: :editable_text>]

Compare with second_column editable text as saved into the database

 #<Locomotive::EditableText _id: 56667eeb3a7dbc4843000075, created_at: 2015-12-08 06:55:39 UTC, updated_at: 2015-12-08 09:57:02 UTC, slug: "second_column", block: "content/main", content: {"en"=>"My English second column", "fr"=>"Mon texte en français de la seconde colonne blabla"}, hint: nil, priority: 0, fixed: false, disabled: {"en"=>false, "fr"=>false}, from_parent: false, locales: ["en", "fr"], _type: "Locomotive::EditableText", default_content: {"en"=>false, "fr"=>false}, format: "html", rows: 10, line_break: true, inline_editing: true, type: :editable_text>

[CedricLor]

Issue should be reopened.

[CedricLor]

Found a quick fix, unofficial. Check this file out:
https://github.com/locomotivecms/liquid/blob/master/lib/liquid/block_body.rb

Replace line 89 by the following line:

      unless token.is_a?(Block) && token.blank?

by the following line:

      unless token.is_a?(Block) && token.blank? && !(token_output.match(/locomotive-editable-text/))

Now you can do:

editable_elements:
  'content/main/first_column': "My English first column"
  'content/main/second_column': "My English second column"
  'content/main/third_column': "My English third column"
---
{% block content/main %}
    {% editable_text "First column", slug: "first_column" %}
    {% endeditable_text %}
    {% editable_text "Second column", slug: "second_column" %}
    {% endeditable_text %}
    {% editable_text "Third column", slug: "third_column" %}
    {% endeditable_text %} 
{% endblock %}

as if you had done:

# editable_elements:
#  'content/main/first_column': "My English first column"
#  'content/main/second_column': "My English second column"
#  'content/main/third_column': "My English third column"
---
{% block content/main %}
    {% editable_text "First column", slug: "first_column" %}
        "My English first column"
    {% endeditable_text %}
    {% editable_text "Second column", slug: "second_column" %}
        "My English second column"
    {% endeditable_text %}
    {% editable_text "Third column", slug: "third_column" %}
        "My English third column"
    {% endeditable_text %} 
{% endblock %}

with live-editing working!!!!

@did I think this could somehow be factored into steam. I understand that this might have been a bug carried over from the former version.

[CedricLor]

The issue with this fix is that the editable_text items are no longer displayed when doing a wagon serve.

[did]

sections are the new way to go (https://doc.locomotivecms.com/v4.0/docs/section-introduction). They're much more powerful than the editable elements.