Sometimes you are not able to output HTML comments and still want to have your clients to be able to click on components. Our react and vue libraries already handle the setup there, however with tools like Nginx and their server side include you might experience some unexpected behavior that you want to get rid of. Below you can find a PHP function that explains how to parse the HTML comment of Storyblok and use the information.

<?php

$blok = array("_editable" => "<!--#storyblok#{\"name\": \"column\", \"space\": \"48408\", \"uid\": \"7c44c5d8-0adb-4c01-a797-12d9b300b99b\", \"id\": \"307934\"}-->");

/**
 * Manually parse the Storyblok HTML editable comments. Use your templating language to output 
 * keys = values as html attributes without quotes or with single quotes.
 * 
 * @param array $blok This is your component object
 * @param boolean $raw Decide if function should return raw array or inline string
 * @return array|string returns element attributes as array or string depending on the type
 **/
function editable($blok, $raw=false) {
  if(isset($blok["_editable"])) {
    $editable = str_replace("-->", "", str_replace("<!--#storyblok#", "", $blok["_editable"]));
    $options = json_decode($editable, true);
    
    $parsed = array(
      "data-blok-c" => $editable,
      "data-blok-uid" => $options["id"] . "-" . $options["uid"],
      "class" => "storyblok__outline"
    );

    if ($raw) {
      return $parsed;
    }

    $inline = "";
    foreach ($parsed as $key => $value) {
      $inline .= $key . "='" . $value . "' ";
    }
    return $inline;  
  }
}

// use for inline output
var_dump(editable($blok));
/*
string(201) "data-blok-c='{"name": "column", "space": "48408", "uid": "7c44c5d8-0adb-4c01-a797-12d9b300b99b", "id": "307934"}' data-blok-uid='307934-7c44c5d8-0adb-4c01-a797-12d9b300b99b' class='storyblok__outline' "
*/

// use for custom attribute output
var_dump(editable($blok, true));

/*
array(3) {
  ["data-blok-c"]=>
  string(99) "{"name": "column", "space": "48408", "uid": "7c44c5d8-0adb-4c01-a797-12d9b300b99b", "id": "307934"}"
  ["data-blok-uid"]=>
  string(43) "307934-7c44c5d8-0adb-4c01-a797-12d9b300b99b"
  ["class"]=>
  string(18) "storyblok__outline"
}
*/