| @@ -157,10 +157,12 @@ | ||
| 157 | 157 | $this->is_richtext ? 'srfm-richtext' : '', |
| 158 | 158 | $this->read_only ? 'srfm-read-only' : '', |
| 159 | 159 | ]; |
| 160 | 160 | |
| 161 | - $classes = Helper::join_strings( $classes ); | |
| 162 | - $random_id = $this->unique_slug . '-' . $this->random_id; | |
| 161 | + $classes = Helper::join_strings( $classes ); | |
| 162 | + $random_id = $this->unique_slug . '-' . $this->random_id; | |
| 163 | + $has_counter = ! $this->is_richtext && ( '' !== $this->min_length || '' !== $this->max_length ); | |
| 164 | + $display_limit = $has_counter ? ( '' !== $this->max_length ? $this->max_length : $this->min_length ) : ''; | |
| 163 | 165 | |
| 164 | 166 | ob_start(); ?> |
| 165 | 167 | <div data-block-id="<?php echo esc_attr( $this->block_id ); ?>" class="<?php echo esc_attr( $classes ); ?>"> |
| 166 | 168 | <?php echo wp_kses_post( $this->label_markup ); ?> |
| @@ -182,8 +184,19 @@ | ||
| 182 | 184 | <?php } ?> |
| 183 | 185 | </div> |
| 184 | 186 | <div class="srfm-error-wrap"> |
| 185 | 187 | <?php echo wp_kses_post( $this->error_msg_markup ); ?> |
| 188 | + <?php if ( $has_counter ) { ?> | |
| 189 | + <div class="srfm-char-counter-wrap"> | |
| 190 | + <span class="srfm-char-counter" | |
| 191 | + data-counter-limit="<?php echo esc_attr( $display_limit ); ?>" | |
| 192 | + <?php if ( '' !== $this->min_length ) { ?> | |
| 193 | + data-counter-min="<?php echo esc_attr( $this->min_length ); ?>" | |
| 194 | + <?php } ?> | |
| 195 | + aria-live="polite" | |
| 196 | + >0/<?php echo esc_html( $display_limit ); ?></span> | |
| 197 | + </div> | |
| 198 | + <?php } ?> | |
| 186 | 199 | </div> |
| 187 | 200 | </div> |
| 188 | 201 | |
| 189 | 202 | <?php |
