Create perfect study notes with the Cornell Notes Gutenberg Block.

Sean Blakeley

<p><strong>Create perfect study notes with the Cornell Notes Gutenberg Block.</strong></p>
<p><a href="https://en.wikipedia.org/wiki/Cornell_Notes" rel="nofollow ugc">Cornell Notes</a> provides an excellent structure for organising and summarized your notes, ideas and concepts – this logical approach is an invaluable way to help learning and retention for students of all ages.</p>
<p>This plugin provides a new, dedicated Cornell Notes Gutenberg block to enable you to quickly and easily take your notes within WordPress.</p>
<h3>How to Use Cornell Notes</h3>
<ol>
<li>Add your title at the top of your note – this is a summary of context of the notes.</li>
<li>Take long-form notes in the right-hand column – you can take notes during a class, lecture, video tutorial or WordCamp Talk, it doesn’t matter. Add as many ideas as you need – click the ‘Add Idea’ indicator to add a new idea.</li>
<li>Once you’ve finished your notes, review them and summarise the concepts with key ideas in the left-hand column.</li>
<li>Finally, summarize all the notes in a sentence or two at the bottom of the page.</li>
<li>To fully benefit from Cornell Notes, you should consider adding <a href="https://en.wikipedia.org/wiki/Spaced_repetition" rel="nofollow ugc">Spaced Repetition</a> to your learning plan.</li>
</ol>
<p>Cornell Notes contains a second block – an <em>Idea</em> block – this block is only made available as a child of the Cornell Note block – and enables you to add as many ideas (key ideas and long-form notes) you require.</p>
<p>There are currently no specific settings required by the Cornell Notes Block.</p>
<h3>Style via CSS Variables</h3>
<p>CSS Variables are used with default settings – you can override these in your theme by setting the variables in the <code>root</code><br />
    <code>:root{<br />
    --note-border-style: dotted;<br />
    --note-border-width: 2px;<br />
    --note-border-color: #f00;<br />
    --note-body-padding: 30px;<br />
    --note-padding: 20px;<br />
}</code></p>
<h3>Style via Classes</h3>
<p>The structure of the Cornell Notes Block:<br />
    <code>.wp-block-cornell-notes-cornell-note<br />
    .cornell-note-title<br />
    .wp-block-cornell-notes-cornell-idea<br />
        .cornell-note-key-idea<br />
        .cornell-note-long-form<br />
    .cornell-note-summary /* forced to the bottom of the note via Flexbox */</code><br />
(This structure is simplified – you will find additional classes added via Gutenberg)</p>
<h3>Localization</h3>
<ul>
<li>English (default)</li>
</ul>
<h3>Translations</h3>
<ul>
<li>English – default<br />
This plugin is translation-ready</li>
</ul>
<h3>How to Contribute to This Project</h3>
<p>All contributions are welcome – make a Pull Request or raise an issue on the <a href="https://github.com/SeanBlakeley/cornell-notes-gutenberg-block" rel="nofollow ugc">Github Repo</a></p>
<h3>Plugin Creator</h3>
<p><a href="https://github.com/SeanBlakeley" rel="nofollow ugc">Sean Blakeley</a></p>


Alternatives to Cornell Notes Gutenberg Block

Top alternatives