Skip to content

Issue 263: Add up/down buttons for re-ordering paragraphs #266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
juanolalla wants to merge 2 commits into
base: 1.x-2.x
Choose a base branch
from
+192 −0
Open

Issue 263: Add up/down buttons for re-ordering paragraphs #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
03ef9f1
Issue 263: Add up/down buttons for re-ordering paragraphs
juanolalla Apr 2, 2026
758c962
Issue 263: Extend up and down buttons also for Open mode
juanolalla Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions paragraphs.field_widget.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,6 +445,7 @@ function paragraphs_field_widget_form_build(array &$form, array &$form_state, ar
$default_edit_mode_override = isset($instance['settings']['default_edit_mode_override']) ? $instance['settings']['default_edit_mode_override'] : PARAGRAPHS_DEFAULT_EDIT_MODE_OVERRIDE;
$force_open = (!empty($instance['widget']['paragraphs_edit_mode_open']) || count($items) < $default_edit_mode_override);
$preview_collapsed = isset($instance['settings']['preview_collapsed']) ? $instance['settings']['preview_collapsed'] : PARAGRAPHS_PREVIEW_MODE_COLLAPSED;
$show_up_down = isset($instance['settings']['show_up_down']) ? $instance['settings']['show_up_down'] : PARAGRAPHS_DEFAULT_SHOW_UP_DOWN;

$being_edited_paragraph = ($default_edit_mode === 'open');

Expand Down Expand Up @@ -540,6 +541,49 @@ function paragraphs_field_widget_form_build(array &$form, array &$form_state, ar
if (!$deleted_paragraph) {

field_attach_form('paragraphs_item', $paragraphs_item, $element, $form_state, $language);

if ($show_up_down) {
$element['paragraph_bundle_header']['inner_actions']['up_button'] = array(
'#delta' => $delta,
'#name' => implode('_', $parents) . '_up_button',
'#type' => 'submit',
'#value' => t('Up'),
'#validate' => array(),
'#submit' => array('paragraphs_up_submit'),
'#limit_validation_errors' => array(),
'#ajax' => array(
'callback' => '_paragraphs_ajax_update_callback',
'effect' => 'fade',
'wrapper' => $element['#wrapper_id'],
),
'#access' => entity_access('update', 'paragraphs_item', $paragraphs_item),
'#weight' => 997,
'#attributes' => array(
'class' => array('paragraphs-up-button'),
),
);

$element['paragraph_bundle_header']['inner_actions']['down_button'] = array(
'#delta' => $delta,
'#name' => implode('_', $parents) . '_down_button',
'#type' => 'submit',
'#value' => t('Down'),
'#validate' => array(),
'#submit' => array('paragraphs_down_submit'),
'#limit_validation_errors' => array(),
'#ajax' => array(
'callback' => '_paragraphs_ajax_update_callback',
'effect' => 'fade',
'wrapper' => $element['#wrapper_id'],
),
'#access' => entity_access('update', 'paragraphs_item', $paragraphs_item),
'#weight' => 998,
'#attributes' => array(
'class' => array('paragraphs-down-button'),
),
);
}

if ($being_edited_paragraph) {
if (!$is_new_paragraph && !entity_access('update', 'paragraphs_item', $paragraphs_item)) {
foreach (element_children($element) as $key) {
Expand Down Expand Up @@ -1218,6 +1262,72 @@ function paragraphs_togglepublish_submit(array $form, array &$form_state) {
$form_state['rebuild'] = TRUE;
}

/**
* Submit callback to move an item up.
*/
function paragraphs_up_submit(array $form, array &$form_state) {
$button = $form_state['triggering_element'];
$delta = $button['#delta'];

// Where in the form we'll find the parent element.
$address = array_slice($button['#array_parents'], 0, -4);

$input = backdrop_array_get_nested_value($form_state['input'], $address);
// Sort by weight,
// but first remove garbage values to ensure proper '_weight' sorting.
unset($input['add_more']);
uasort($input, '_field_sort_items_helper');

$keys = array_keys($input);
$index = array_search($delta, $keys);

if ($index > 0) {
$swappable_delta = $keys[$index - 1];
$tmp_weight = $input[$swappable_delta]['_weight'];
$input[$swappable_delta]['_weight'] = $input[$delta]['_weight'];
$input[$delta]['_weight'] = $tmp_weight;

// After swapping, we should re-sort to ensure consistency.
uasort($input, '_field_sort_items_helper');
}

backdrop_array_set_nested_value($form_state['input'], $address, $input);
$form_state['rebuild'] = TRUE;
}

/**
* Submit callback to move an item down.
*/
function paragraphs_down_submit(array $form, array &$form_state) {
$button = $form_state['triggering_element'];
$delta = $button['#delta'];

// Where in the form we'll find the parent element.
$address = array_slice($button['#array_parents'], 0, -4);

$input = backdrop_array_get_nested_value($form_state['input'], $address);
// Sort by weight,
// but first remove garbage values to ensure proper '_weight' sorting.
unset($input['add_more']);
uasort($input, '_field_sort_items_helper');

$keys = array_keys($input);
$index = array_search($delta, $keys);

if ($index !== FALSE && $index < count($keys) - 1) {
$swappable_delta = $keys[$index + 1];
$tmp_weight = $input[$swappable_delta]['_weight'];
$input[$swappable_delta]['_weight'] = $input[$delta]['_weight'];
$input[$delta]['_weight'] = $tmp_weight;

// After swapping, we should re-sort to ensure consistency.
uasort($input, '_field_sort_items_helper');
}

backdrop_array_set_nested_value($form_state['input'], $address, $input);
$form_state['rebuild'] = TRUE;
}

/**
* Submit callback to editing an item from the field UI multiple wrapper.
*
Expand Down
8 changes: 8 additions & 0 deletions paragraphs.module
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ define('PARAGRAPHS_DEFAULT_EDIT_MODE_OVERRIDE', 1);
define('PARAGRAPHS_PREVIEW_MODE_COLLAPSED', FALSE);
define('PARAGRAPHS_DEFAULT_ADD_MODE', 'select');
define('PARAGRAPHS_DEFAULT_MODAL_ADMIN', FALSE);
define('PARAGRAPHS_DEFAULT_SHOW_UP_DOWN', FALSE);

// Modules should return this value from hook_paragraphs_item_access() to allow
// access to a paragraphs item.
Expand Down Expand Up @@ -753,6 +754,13 @@ function paragraphs_field_instance_settings_form($field, $instance) {
'#default_value' => isset($settings['modal_admin']) ? $settings['modal_admin'] : PARAGRAPHS_DEFAULT_MODAL_ADMIN,
);

$element['show_up_down'] = array(
'#type' => 'checkbox',
'#title' => t('Show "Up" and "Down" buttons'),
'#description' => t('Show "Up" and "Down" buttons to easily move paragraphs.'),
'#default_value' => isset($settings['show_up_down']) ? $settings['show_up_down'] : PARAGRAPHS_DEFAULT_SHOW_UP_DOWN,
);

if (!count($bundles)) {
$link = l(t('click here to add one'), 'admin/structure/paragraphs/types/add', array('query' => backdrop_get_destination()));
$element['allowed_bundles_explain'] = array(
Expand Down
74 changes: 74 additions & 0 deletions tests/paragraphs.test
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,80 @@ class ParagraphsFieldTestCase extends BackdropWebTestCase {

class ParagraphsWebTestCase extends ParagraphsFieldTestCase {

/**
* Test the up and down buttons.
*/
public function testUpDownButtons() {
$admin_user = $this->backdropCreateUser(array(
'administer paragraphs types',
'administer nodes',
'bypass node access',
'administer content types',
'administer fields',
));
$this->backdropLogin($admin_user);

// Create a paragraph type.
$this->backdropPost('admin/structure/paragraphs/types/add', array(
'name' => 'Test Paragraph',
'bundle' => 'test_paragraph',
), t('Save'));

// Create a content type with a paragraphs field.
$this->backdropPost('admin/structure/types/add', array(
'name' => 'Test Content Type',
'type' => 'test_content_type',
), t('Save and add fields'));

$this->backdropPost(NULL, array(
'fields[_add_new_field][label]' => 'Paragraphs Field',
'fields[_add_new_field][field_name]' => 'paragraphs_field',
'fields[_add_new_field][type]' => 'paragraphs',
'fields[_add_new_field][widget_type]' => 'paragraphs_embed',
), t('Save'));

$this->backdropPost(NULL, array(), t('Save field settings'));

// Enable the Up and Down buttons and set default edit mode to preview.
$this->backdropPost(NULL, array(
'instance[settings][default_edit_mode]' => 'preview',
'instance[settings][show_up_down]' => TRUE,
'field[cardinality]' => -1,
), t('Save settings'));

// Create a node with three paragraphs.
$this->backdropGet('node/add/test-content-type');
$this->backdropPost(NULL, array(), t('Add Test Paragraph'));
$this->backdropPost(NULL, array(), t('Add Test Paragraph'));
$this->backdropPost(NULL, array(), t('Add Test Paragraph'));

// Check if Up and Down buttons are present in preview mode.
$this->assertFieldByName('field_paragraphs_field_und_0_up_button', t('Up'), 'Up button found for delta 0');
$this->assertFieldByName('field_paragraphs_field_und_0_down_button', t('Down'), 'Down button found for delta 0');

// Middle item (1) should have both.
$this->assertFieldByName('field_paragraphs_field_und_1_up_button', t('Up'), 'Up button found for delta 1');
$this->assertFieldByName('field_paragraphs_field_und_1_down_button', t('Down'), 'Down button found for delta 1');

// Last item (2) should also have both.
$this->assertFieldByName('field_paragraphs_field_und_2_up_button', t('Up'), 'Up button found for delta 2');
$this->assertFieldByName('field_paragraphs_field_und_2_down_button', t('Down'), 'Down button found for delta 2');

// Change edit mode to "open" and check if buttons are still present.
$this->backdropPost('admin/structure/types/manage/test-content-type/fields/field_paragraphs_field', array(
'instance[settings][default_edit_mode]' => 'open',
), t('Save settings'));

$this->backdropGet('node/add/test-content-type');
$this->backdropPost(NULL, array(), t('Add Test Paragraph'));
$this->backdropPost(NULL, array(), t('Add Test Paragraph'));

$this->assertFieldByName('field_paragraphs_field_und_0_up_button', t('Up'), 'Up button found for delta 0 in Open mode');
$this->assertFieldByName('field_paragraphs_field_und_0_down_button', t('Down'), 'Down button found for delta 0 in Open mode');
$this->assertFieldByName('field_paragraphs_field_und_1_up_button', t('Up'), 'Up button found for delta 1 in Open mode');
$this->assertFieldByName('field_paragraphs_field_und_1_down_button', t('Down'), 'Down button found for delta 1 in Open mode');
}

/**
* A user object for the privileged user.
*
Expand Down
Loading