Review Widget for Gutenberg

<div itemscope itemtype="https://schema.org/Review">
<span class="escondido" itemprop="author" itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">José Sotelo</span>
</span>
<h3 itemprop="itemReviewed" itemscope itemtype="https://schema.org/thing"><span itemprop="name">{{ producto }}</span></h3>
<!-- UIUX -->
<div class="wp-block-review-progressbar">
  <div class="review-block-progress-bar">
    <div class="review-block-progress-labels review-position-outside">
    <div class="review-block-progress-bar-title">UI/UX</div>
<div class="review-progress-percentage"><span>{{uiux}}%</span></div>
  </div>
  <div class="review-progress">
<div class="review-progress-bar" style="width: {{uiux}}%" role="progressbar">
    </div>
  </div>
</div>
</div>
<!-- end ui-->
<!-- valor -->
<div class="wp-block-review-progressbar">
  <div class="review-block-progress-bar">
    <div class="review-block-progress-labels review-position-outside">
    <div class="review-block-progress-bar-title">Valor/Precio</div>
<div class="review-progress-percentage"><span>{{valor}}%</span></div>
  </div>
  <div class="review-progress">
<div class="review-progress-bar" style="width: {{valor}}%" role="progressbar">
    </div>
  </div>
</div>
</div>
<!-- end valor-->
<!-- Calidad -->
<div class="wp-block-review-progressbar">
  <div class="review-block-progress-bar">
    <div class="review-block-progress-labels review-position-outside">
    <div class="review-block-progress-bar-title">Calidad</div>
<div class="review-progress-percentage"><span>{{calidad}}%</span></div>
  </div>
  <div class="review-progress">
<div class="review-progress-bar" style="width: {{calidad}}%" role="progressbar">
    </div>
  </div>
</div>
</div>
<!-- end Calidad -->
<!-- Innovación -->
<div class="wp-block-review-progressbar">
  <div class="review-block-progress-bar">
    <div class="review-block-progress-labels review-position-outside">
    <div class="review-block-progress-bar-title">Innovación</div>
<div class="review-progress-percentage"><span>{{innovacion}}%</span></div>
  </div>
  <div class="review-progress">
<div class="review-progress-bar" style="width: {{innovacion}}%" role="progressbar">
    </div>
  </div>
</div>
</div>
<!-- end Innovación -->
<!-- Compañía -->
<div class="wp-block-review-progressbar">
  <div class="review-block-progress-bar">
    <div class="review-block-progress-labels review-position-outside">
    <div class="review-block-progress-bar-title">Compañía</div>
<div class="review-progress-percentage"><span>{{compania}}%</span></div>
  </div>
  <div class="review-progress">
<div class="review-progress-bar" style="width: {{compania}}%" role="progressbar">
    </div>
  </div>
</div>
</div>
<!-- end Compañía -->
<div class="review-summary review-summary-top review-summary-align-center">
	<div class="review-summary-content">
<h4 class="review-summary-score" itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating"><span itemprop="ratingValue">{{ (uiux + valor + calidad + innovacion + compania) / 5 }}</span>%<span class="escondido" itemprop="bestRating">100</span><h4>
<h5 class="review-summary-title">{{titulo_conclusion}}</h5>
    <div class="review-summary-text">
<p itemprop="reviewBody">{{conclusion}}</p>
    </div>
  </div>
</div>
<!-- PROS CONS -->
<div class="wp-review-pros-cons"> 
    <div class="wp-review-pros"> 
        <p class="pros-titulo"><strong>Pros</strong></p>
		<ul id="pros-list">
		{% for i in pros %}
        <li>{{i}}</li>
		{% endfor %}
		</ul>
    </div> 
    <div class="wp-review-cons"> 
        <p class="cons-titulo"><strong>Cons</strong></p> 
        <ul id="cons-list">
		{% for i in cons %}
        <li>{{i}}</li>
		{% endfor %}
		</ul>
    </div> 
</div>
</div>
<!-- END PROS CONS -->

    <style>
        .escondido{
          display:none;
        }
        .pros-titulo{
        background-color: #459cad;
        border-width: 0;
        color: #fff;
        margin: 0 0 25px;
        padding: 15px 15px 10px;
        text-transform: uppercase;
        }
        .cons-titulo{
        background-color: #ec7d77;
        border-width: 0;
        color: #fff;
        margin: 0 0 25px;
        padding: 15px 15px 10px;
        text-transform: uppercase;
        }
        .wp-review-pros-cons{
        background-color: #d6e5fa;
        border-width: 0;
        box-sizing: border-box;
        clear: both;
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        }
        .wp-review-pros{
        -webkit-box-flex: 0;
        border-width: 0;
        box-sizing: border-box;
        flex: 0 0 50%;
        margin: 0;
        padding: 30px 15px 30px 30px;
        }
        .wp-review-cons{
        -webkit-box-flex: 0;
        border-width: 0;
        box-sizing: border-box;
        flex: 0 0 50%;
        margin: 0;
        padding: 30px 15px 30px 30px;
        }
      .review-summary-score{
        box-sizing: border-box;
        color: #0f4ea5;
        font-family: Nunito,sans-serif;
        font-size: 60px;
        font-style: normal;
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.44;
        margin: 0 0 8px;
        text-transform: none;
      }
      .review-summary-content{
        -webkit-box-flex: 1;
        background-color: transparent;
        border-radius: 7px;
        box-sizing: border-box;
        flex: 1 1 100%;
        margin: 0;
        padding: 13px 5px 0;
        text-align: center;
        width: 100%;
      }
      .review-summary-title{
        box-sizing: border-box;
        color: #42527b;
        font-family: Nunito,sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.44;
        margin: 0 0 8px;
        text-transform: none;
      }
      .review-summary-text{
        box-sizing: border-box;
        font-family: "Open Sans",sans-serif;
        font-size: 16px;
        line-height: 26px;
        text-transform: none;
      }

    .wp-block-review-progressbar{
      padding-bottom: 10px;
      padding-top: 10px;
      z-index: 0;
    }
    .review-progress{
      background-color: #d6e5fa;
      border-radius: 10px;
      height: 8px;
      line-height: 8px;
    }
    .review-progress-bar{
      background-color: #64a6ff;
      background-image: none;
      border-radius: 10px;
      height: 100%;
      overflow: hidden;
      position: relative;
      transition-delay: 0s;
      transition-duration: .3s;
      transition-property: all;
      transition-timing-function: ease;
    }
    .review-block-progress-bar-title{

    }
    .review-block-progress-labels{
      -webkit-box-pack: justify;
      color: #0f4ea5;
      display: flex;
      font-family: Nunito,sans-serif;
      font-size: 16px;
      font-weight: 600;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    </style>