При клике на одном из узлов DOM, событие click "всплывает" вверх по дереву до тех пор пока не достигнет корня или не будет отменено в явном виде.

React передает в обработчик события "синтетический" объект события, который, помимо прочего имеет метод stopPropagate. Этот метод (как и его нативный аналог) останавливает дальнейшее "всплытие" события вверх по дереву DOM. Вот как можно использовать этот метод на практике:

var Block = React.createClass({
    handleClose: function(e) {
        e.stopPropagation();
        alert('close');
    },
    handleClick: function(e) {
        alert('click');
    },
    render: function() {
        return (
            <div onClick={this.handleClick}>
                <span>Foo Bar Baz</span>
                <span onClick={this.handleClose}> &#215;</span>
            </div>
        );
    }
});

Проще говоря вам надо применить e.stopPropagation(); при клике на нужный вам элемент(лайк)
Ссылка на вопрос на stackoverflow: https://ru.stackoverflow.com/questions/537267/reac...

Потому что у вас в классе B – опечатка.

class B extends A {
  static public $filed = 2;  // должно быть $field, а не $filed
}

перейти к файлу style.css, он лежит в корне папки с темой,
и в самом конце добавить код:

body.page-two-column:not(.archive) #primary .entry-content {
width: 100%:
}
.page-two-column .panel-content .entry-content {
    width: 100%;
}
.wrap {
max-width: 100%;
}